jQuery根据视口大小更改脚本

Question

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

我正在尝试调整以下代码以保留所有这些功能，但在移动设备上完全禁用它，即小于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（）是事件处理程序，所以函数的上下文可能在变量'var relativeY'之外，从而导致意外行为。

/* 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");
    }
}
});

Answer 2

您可以只使用$(window).width()来获取窗口的宽度并相应地运行脚本