Javascript页面滚动时导航智能定位

时间：2023-04-02 15:56:49 HTML

Javascript页面滚动时导航的智能定位需要添加一个类来区分当前用户浏览的区域。假设计结构如下：section1

section2

section3

section4

section5样式如下body{margin:0;}.contain呃{高度:100%;背景色：#fff;}.wrapper{margin-right:300px;}.wrapper.section{height:400px;行高：400px；文本对齐：居中；颜色：#fff；字体大小：24px；font-weight:bold;}.wrapper.section:nth-child(1){background:#52c41a;}.wrapper.section:nth-child(2){background:#12c19e;}.wrapper.section:nth-child(3){background:#096dd9;}.wrapper.section:nth-child(4){background:#13c2c2;}.wrapper.section:nth-child(5){background:#ff7875;}nav{位置：固定的;顶部：0；右：0；高度：100%；宽度：300px；填充：60px0；背景：RGB（244、246、248）；框大小：边框框；text-align:center;}nava{display:block;边距：10px0；颜色：#333；文本装饰：无；}nav.current{颜色：#13c2c2；font-weight:bold;}页面滚动时导航定位js代码如下：var$navs=$('nava'),//导航$sections=$('.section'),//模板$window=$(window),navLength=$navs.length-1;$window.on('scroll',function(){varscrollTop=$window.scrollTop(),len=navLength;for(;len>-1;len--){varthat=$sections.eq(len);如果(scrollTop>=that.offset().top){$navs.removeClass('current').eq(len).addClass('current');break;}}});效果如下：不难看出，基本原理是在窗口滚动时，依次从后向前遍历模块，如果窗口的滚动高度大于等于距离当前模块的页面顶部除了这个需求还有一个需求，就是点击导航定位到导航对应模块的顶部代码如下：$navs.on('click',function(e){e.preventDefault();$('html,body').animate({'scrollTop':$($(this).attr('href')).offset().top},400);});效果如下：完整代码请访问：https://github.com/wangshikun...以上基本满足了业务的基本需求，是工作中总结的经验，仅供参考，请指点有错误请指出，谢谢！

上一篇：【JavaScript】DOM之Document对象

下一篇：网站建设过程中的常见问题

Javascript页面滚动时导航智能定位相关文章