JS 導航欄 隨滾動條即時改變

思考：比較滾動條距離頂部的距離 >= 對應模塊距離頂部的距離大小，則高亮對應的選項。

知識點：

（1）$(window).scrollTop()　//滾動條距離頂部的距離

（2）offset().top 　　　　//對應模塊距離頂部的距離

 

代碼：

 var $navlist = $('.nav-con a.nav-btn');//獲取導航列表

 var itemTop = [];
  for(var i = 1;i<= 4;i++){
       itemTop[i] = $('.part'+ i).offset().top;//獲取對應模塊距離頂部的距離
  }    
 
//監聽滾動條事件
 $(window).scroll(function(){
     var scrollTop = $(window).scrollTop();//滾動條距離頂部的距離

     for(i = 0;i <= itemTop.length; i++){
          if(scrollTop >= itemTop[i+1]-450){//判斷大小
             $navlist.eq(i).addClass('active').siblings('a').removeClass('active');
          }
      }
 });