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