這篇文章給大家分享的是有關Jquery如何實現(xiàn)滾動監(jiān)聽和附加導航的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

專注于為中小企業(yè)提供網站制作、做網站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)陽明免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現(xiàn)規(guī)模擴充和轉變。

導航思路：

1. 設定nav導航的類。

2. 設定索引值。

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

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

監(jiān)聽：

   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")    //點亮正在點擊的導航
        });
    });
});

<!--滾動監(jiān)聽-->    
$(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如何實現(xiàn)滾動監(jiān)聽和附加導航”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前題目：Jquery如何實現(xiàn)滾動監(jiān)聽和附加導航
網頁路徑：http://jinyejixie.com/article22/ghhccc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、手機網站建設、網站營銷、網站策劃、外貿建站、網站維護

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)