頁面滾動的時候自動切換導航欄
阿新 • • 發佈：2019-02-13
解決方法:
頁面主體設定相同的結構如:
<body>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</body>
當我們頁面下上滑動的時候 利用當前div 的offset().top的值與頁面滾動的距離作比較,進而獲取當前頁面主體顯示的是哪個div(class為items的div)，進而去對應導航欄上的對應選項，達到切換效果)
程式碼:
$(window).scroll(function(){
var top=document.documentElement.scrollTop || document.body.scrollTop;
var curId = ""; // 當前頁面 div 快 的id
var items = $('.items');
items.each(function(i,e){
var m = $(this);
var itemsTop = m.offset().top;
if(top>itemsTop-250){
curId = "#" + m.attr("id");
}else{
return false;
}
});
// 這裡我們獲取到當前主體顯示的div,可以知道當前div的id,根據當前div的資訊去對應導航欄的選項，可以進行導航欄切換
// 或者進行其他操作
});