導航顯示/隱藏滾動

我正在構建一個腳本來顯示/隱藏頁面上某個高度的導航菜單。它確實有效，當我縮放頁面並且佈局捕捉到它的下一個狀態時，滾動顯示/隱藏腳本仍然根據加載時窗口的寬度以相同的高度運行。導航顯示/隱藏滾動

下面是代碼：

$(window).on('scroll', function(){ 
    if($winwidth > 1200){ 
     console.log('over 1200'); 
     var $menudrop = 800; 
     if($(window).scrollTop() >= $menudrop){ 
      $('#hidden-nav').slideDown(1000); 
     }else{ 
      $('#hidden-nav').slideUp(1000); 
     } 
    } 
}); 

$(window).on('scroll', function(){ 
    if($winwidth < 1200 && $winwidth > 992 ){ 
     console.log("under 1200"); 
     var $menudrop = 560; 
     if($(window).scrollTop() >= $menudrop){ 
      $('#hidden-nav').slideDown(1000); 
     }else{ 
      $('#hidden-nav').slideUp(1000); 
     } 
    } 
});

什麼我沒有得到嗎？

來源

2014-01-07 EZDC

在使用它之前，您必須刷新$winwidth的值，因爲它的值可能因調整大小事件而發生更改。通常沒有理由維護一個全局寬度值，所以我建議把它改成一個像這樣的局部變量，只要你需要它就可以得到它。

$(window).on('scroll', function() { 
    var $winwidth = $(window).width(); 
    if ($winwidth > 1200) { 
     console.log('over 1200'); 
     var $menudrop = 800; 
     if ($(window).scrollTop() >= $menudrop) { 
      $('#hidden-nav').slideDown(1000); 
     } else{ 
      $('#hidden-nav').slideUp(1000); 
     } 
    } else if ($winwidth < 1200 && $winwidth > 992 ){ 
     console.log("under 1200"); 
     var $menudrop = 560; 
     if ($(window).scrollTop() >= $menudrop) { 
      $('#hidden-nav').slideDown(1000); 
     } else{ 
      $('#hidden-nav').slideUp(1000); 
     } 
    } 
});

我還建議你將所有的邏輯合併到一個滾動處理程序中，因爲沒有理由有兩個獨立的事件處理程序。

來源

2014-01-07 22:27:12 jfriend00

不滾動事件，window.resize事件 –

@StephenThomas - 問題是，如果'$ winwidth'的值在使用前刷新，它不會過期。 – jfriend00

那麼，你不會告訴我們你如何設置$winwidth，但如果它在頁面加載時設置，則需要在window.resize事件上更新它。

來源

2014-01-07 22:26:55

導航顯示/隱藏滾動

回答

相關問題