Jquery滾動監聽和附加導航

標籤：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滾動監聽和附加導航