jquery 導航 滾動監聽

初學jquery,多多指教

導航思路：

1. 設定nav導航的類。
   

2. 設定索引值。

3. 點擊導航內容，導航的索引和內容的索引一一對應。

4. 點擊導航欄，內容滑動一段距離。

監聽：

1.滑動內容文檔時，索引值變動。

2.導航對應的索引所在內容高亮。

下面是代碼

<!--導航-->
$(document).ready(function() {
$(".nav_scroll_a").each(function() { //導航所對應的類
$(this).click(function() { //點擊導航欄內容
var index = $(this).index() //獲取索引值index

//找到對應內容的索引值，並滑動一定的高度

window.scrollTo(‘y‘, $(".nav_scroll:nth-of-type(" + (index + 1) + ")").offset().top - 100)
$(".nav_scroll_a").removeClass("active") //清除所有導航的激活屬性
$(this).addClass("active") //點亮正在點擊的導航
});
});
});

<!--滾動監聽-->
$(document).ready(function() {

$(window).scroll(function() { //滑動事件
for(var i = 0; i < $(".nav_scroll_a").length; i++) { //遍歷每一次的導航事件
if($(window).scrollTop() > $(".nav_scroll").eq(i).offset().top - 130) { //內容欄滑動
$(".nav_scroll_a").removeClass("active")
$(".nav_scroll_a").eq(i).addClass("active")
}
}
});
});

本文出自 “zzujulian” 博客，轉載請與作者聯系！

Jquery滾動監聽和附加導航