執行javascript只有一定的寬度與調整大小

Question

我目前正在開發一個網站，它有一個粘性菜單功能。我有正常的JavaScript工作良好，它添加了一些類，一旦客戶端滾動超過150像素。

我現在面臨的，我不希望人們一旦查看下面725px的網站要添加的類的問題，所以我加了一個規則，它只是執行上面725px的腳本，但問題是這樣的：

如果我調整窗口，回滿的功能將不再有效，所以我創建了JavaScript的另一個規則調整的功能，但我不能得到它的工作..

這裏是我的腳本：

$(document).ready(function(){ 
var mainbottom = 150; 
if($(window).innerWidth() > 725) { 
    $(window).on('scroll',function(){ 

     stop = Math.round($(window).scrollTop()); 
     if (stop > mainbottom) { 
      $('.header').addClass('sticky-nav'); 
      $('.logo').addClass('sticky-logo'); 
      $('.navigation').addClass('sticky-menu'); 
     } else { 
      $('.header').removeClass('sticky-nav'); 
      $('.logo').removeClass('sticky-logo'); 
      $('.navigation').removeClass('sticky-menu'); 
     } 
    }); 
    } 
}); 
$(window).resize(function() { 
var mainbottom = 150; 
if($(window).innerWidth() > 725) { 
    $(window).on('scroll',function(){ 

     stop = Math.round($(window).scrollTop()); 
     if (stop > mainbottom) { 
      $('.header').addClass('sticky-nav'); 
      $('.logo').addClass('sticky-logo'); 
      $('.navigation').addClass('sticky-menu'); 
     } else { 
      $('.header').removeClass('sticky-nav'); 
      $('.logo').removeClass('sticky-logo'); 
      $('.navigation').removeClass('sticky-menu'); 
     } 
    }); 
    } 
}); 

我希望有人能幫助我解決這個問題LEM。

Answer 1

您正在定義一個resize事件偵聽器中的滾動事件偵聽器，所以基本上你就是在每個響應事件上聲明滾動偵聽器（因此如果用戶調整瀏覽器大小，滾動偵聽器會被定義很多次）。你需要糾正這一點。

您可以聲明一個標誌（boolean）來指示視口是否低於725px。它應該通過測試視口尺寸在$（document）.ready（...）上初始化。

創建一個resize事件偵聽器，通過測試視口寬度更新此標誌，因此您總是知道是否需要管理您的類。

此時，console.log（your_flag）在您的resize事件偵聽器中檢查它是否正常工作。

然後聲明一個滾動事件監聽器，在這個監聽器中，你要做的第一件事是測試標誌值。如果viewport> 725，那麼管理這些類，否則什麼都不做。

Answer 2

首先，你應該保持你的代碼DRY。因此，最好不要複製粘貼任何代碼，因爲當您必須修改行爲或修復錯誤時，您必須編輯所有副本。

你沒有，但你的第二個$（window）.resize（）處理程序在onready處理程序，所以也許這就是爲什麼它不被觸發。

這應該工作：

$(document).ready(function(){ 
    var mainbottom = 150; 

    function onScroll() { 
     stop = Math.round($(window).scrollTop()); 

     if (stop > mainbottom) { 
      $('.header').addClass('sticky-nav'); 
      $('.logo').addClass('sticky-logo'); 
      $('.navigation').addClass('sticky-menu'); 
     } else { 
      $('.header').removeClass('sticky-nav'); 
      $('.logo').removeClass('sticky-logo'); 
      $('.navigation').removeClass('sticky-menu'); 
     } 
    } 

    var widthExceeded = false; 
    $(window).resize(function() { 
     $(window).innerWidth() > 725) { 
      if (!widthExceeded) { 
       $(window).on('scroll', onScroll); 
      } 
      widthExceeded = true; 
     } else { 
      if (widthExceeded) { 
       $(window).off('scroll', onScroll); 
      } 
      widthExceeded = false; 
     } 
    }).resize(); 
});