JS 导航栏随滚动条即时改变

最新推荐文章于 2021-03-28 22:30:33 发布

转载最新推荐文章于 2021-03-28 22:30:33 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luckyjing77/p/9116569.html

本文介绍了一种通过比较滚动条距离顶部的距离与各模块距离顶部的距离来实现导航栏选项高亮的技术。具体实现中使用了jQuery，监测滚动条的位置变化，并相应地调整导航栏样式。

思考：比较滚动条距离顶部的距离 >= 对应模块距离顶部的距离大小，则高亮对应的选项。

知识点：

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

转载于:https://www.cnblogs.com/luckyjing77/p/9116569.html

JS 导航栏 随滚动条即时改变

JS 导航栏随滚动条即时改变