jquery 根据视口大小更改脚本

Question

下面的代码旨在当用户位于页面顶部时将 class .active 添加到我的 div (#sidebar)。此外，如果在页面的下方，手动展开 div（添加 .active），则 .active class 将保留，除非用户向上或向下移动 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).width() 之类的东西来获取 window 的宽度，并相应地运行脚本

Answer 2

检查 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");
    }
}
});

jquery 根据视口大小更改脚本

jquery change script based on viewport size

javascript

jquery

viewport