javascript - jquery 根据视口(viewport)大小更改脚本

Question

下面的代码旨在添加类 .active当用户位于页面顶部时，到我的 div ( #sidebar )。此外，如果进一步向下移动页面并手动扩展 div(添加 .active )，则 .active除非用户向上或向下移动 100px(.line 用作测量这一点的标记)，否则类将保留。

我正在尝试调整下面的代码以保留所有这些功能，但在移动设备上(即小于 414px)时完全禁用它。

有什么建议吗？

/* Expand/Collapse sidebar based on position in page */
var relativeY = $("#sidebar").offset().top - $(".line").offset().top;

$(window).scroll(function(){

relativeY = $("#sidebar").offset().top - $(".line").offset().top;    
console.log(relativeY);
    if(relativeY >  100 || relativeY < -100 ) {
        $("#sidebar").removeClass("active");
        $("#sidebarToggle").removeClass("active");
        $(".line").css("top","0")
    }
    else  {
        $("#sidebar").addClass("active");
        $("#sidebarToggle").addClass("active");
    }
});

编辑

我尝试实现下面的 ($window.width() > 414) 但它不起作用？

/* Expand/Collapse sidebar based on position in page */
var relativeY = $("#sidebar").offset().top - $(".line").offset().top;

$(window).scroll(function(){

relativeY = $("#sidebar").offset().top - $(".line").offset().top;    
console.log(relativeY);

if ($window.width() > 414) {
  if (relativeY > 100 || relativeY < -100) {
    $("#sidebar").removeClass("active");
    $("#sidebarToggle").removeClass("active");
    $(".line").css("top", "0")
  } else {
    $("#sidebar").addClass("active");
    $("#sidebarToggle").addClass("active");
  }
}
});

Answer 1

检查 window.innerWidth - 使用 if 语句有条件地运行代码。如果这不起作用，则这不是您所概述的问题。

由于 $(window).scroll() 是一个事件处理程序，因此该函数的上下文可能位于变量“varrelativeY”之外，从而导致意外行为。

/* Expand/Collapse sidebar based on position in page */
var relativeY = $("#sidebar").offset().top - $(".line").offset().top;

$(window).scroll(function(){
if(window.innerWidth > 414) {
    relativeY = $("#sidebar").offset().top - $(".line").offset().top;    
    console.log(relativeY);
    if(relativeY >  100 || relativeY < -100 ) {
        $("#sidebar").removeClass("active");
        $("#sidebarToggle").removeClass("active");
        $(".line").css("top","0")
    }
    else  {
        $("#sidebar").addClass("active");
        $("#sidebarToggle").addClass("active");
    }
}
});