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")
            }
        }
    });
});

感謝各位的閱讀！關于“Jquery如何實現滾動監聽和附加導航”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！