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（）＆gt; 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; var relativeY＆＃39;导致意外行为。

/* 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()的内容来获取窗口的宽度并相应地运行脚本

jquery根据视口大小更改脚本

2 个答案: