jQuery調整大小和滾動

我正在使用jQuery在我正在處理的單頁面上創建一些效果。我有兩個單獨的導航欄。一個絕對（#initial）位於頁面頂部，另一個固定（#fixed_nav）到屏幕頂部。根據屏幕寬度，固定的有兩種不同的樣式。jQuery調整大小和滾動

我想要做的是在用戶向下滾動到#initial之後，#fixed_nav向下滑動到視圖中，然後粘住，直到您再次滾動並可以再次看到#initial。當窗口被調整大小時，我也希望它作出響應切換，因爲這可能不常見。我個人可以讓他們都能工作，但我嘗試了幾種不同的方式來讓他們一起工作，而我只得到一個或另一個。我希望有人能夠用這個指向我的正確方向。這就是我現在所擁有的對腳本的一部分：

//Nav Switcher 
    if ($(window).width >= 940) { 
     $(document).scroll(function() { 
      if ($(window).scrollTop() >= 60) { 
       $('#fixed_nav').slideDown(); 
      } else { 
       $('#fixed_nav').slideUp(); 
      } 
     }); 
    } 
    //Responsive 
    $(document).resize(function() { 
     if ($(window).width() < 940) { 
      $('#fixed_nav').show(); 
      $('#initial').hide(); 
     } 
    });

響應部分工作，但我不再獲得#fixed_nav滑下的寬度或940+。

來源

2015-01-13 Mark Little

首先，不是使用javascript來執行響應式任務，而是使用css3媒體查詢，性能結果會好很多。

/* CSS */ 
@media only screen and (max-width: 939px) { 
    #initial {display:none} 
} 
@media only screen and (min-width: 940px) { 
    #fixed_nav {display:none} 
}

其次，注意你是結合調整大小的處理函數只有在窗口寬度是最初> = 940你想什麼做的是反正綁定功能，然後讓它運行只有在該條件成立的情況下：

// Javascript 
$(document).scroll(function() { 
     if ($(window).width >= 940) { 
      if ($(window).scrollTop() >= 60) { 
       $('#fixed_nav').slideDown(); 
      } else { 
       $('#fixed_nav').slideUp(); 
      } 
     } 
});

來源

2015-01-13 09:35:25 AvivC

謝謝！這工作很好。現在我有另一個奇怪的問題。我拿出了jQuery的重新調整大小，我正在使用媒體查詢。然而，如果由於某種原因有人要調整窗口的大小（例如，如果它們開始<940px並且最大化了窗口），則每個鏈接的偏移保持原樣。如果你調整大小並刷新它的作品完美。 –

jQuery調整大小和滾動

回答

相關問題