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()來獲取窗口的寬度並相應地運行腳本