摘要：常见的开发页面中可能会有这么一个需求，页面中会有多个模块，每个模块对应一个导航，当页面滚动到某个模块时，对应的模块导航需要加上一个类用于区分当前用户所浏览区域。
常见的开发页面中可能会有这么一个需求，页面中会有多个模块，每个模块对应一个导航，当页面滚动到某个模块时，对应的模块导航需要加上一个类用于区分当前用户所浏览区域。
假设结构如下：
页面滚动时导航定位section1section2section3section4section5
js代码如下：
var $navs = $("nav a"), // 导航
$sections = $(".section"), // 模块
$window = $(window),
navLength = $navs.length - 1;
$window.on("scroll", function() {
var scrollTop = $window.scrollTop(),
len = navLength;
for (; len > -1; len--) {
var that = $sections.eq(len);
if (scrollTop >= that.offset().top) {
$navs.removeClass("current").eq(len).addClass("current");
break;
}
}
});
效果如下：
不难看出，基本原理就是在window滚动的时候，依次将模块从后向前遍历，如果window的滚动高度大于或等于当前模块的距页面顶部的距离，则将当前模块对应的导航突出显示，并且不再继续遍历
点击导航定位页面除了这种需求外，还有另一种需求，就是点击导航定位到导航所对应模块的顶部。
代码如下：
$navs.on("click", function(e) {
e.preventDefault();
$("html, body").animate({
"scrollTop": $($(this).attr("href")).offset().top
}, 400);
});
效果如下：
以上基本上满足了业务的基本需求，这是工作中总结的经验，仅供参考，有错误请指出，谢谢！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91703.html
摘要：常见的开发页面中可能会有这么一个需求，页面中会有多个模块，每个模块对应一个导航，当页面滚动到某个模块时，对应的模块导航需要加上一个类用于区分当前用户所浏览区域。 常见的开发页面中可能会有这么一个需求，页面中会有多个模块，每个模块对应一个导航，当页面滚动到某个模块时，对应的模块导航需要加上一个类用于区分当前用户所浏览区域。 假设结构如下： section1 ...
摘要：库一个用来在中创建炫酷的浮动粒子的库一个用来在中创建物体和空间的库快速实现全屏滚动特性打字机效果滚动到某个元素位置时触发一个功能语法高亮使用创建漂亮的图表能够明显加速网站加载时间，鼠标时预加载资源另一个图表库一个基于动画和平移的雪碧图库实现 Javascript 库 Particles.js 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js 一个用来在 web 中创...
摘要：需要使用做一个专题页面。滚动页面指定区域导航高亮。监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加，其他去掉进行样式切换。 需要使用vue做一个专题页面。 滚动页面指定区域导航高亮。 监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。 ...
摘要：需要使用做一个专题页面。滚动页面指定区域导航高亮。监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加，其他去掉进行样式切换。 需要使用vue做一个专题页面。 滚动页面指定区域导航高亮。 监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。 ...
摘要：需要使用做一个专题页面。滚动页面指定区域导航高亮。监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加，其他去掉进行样式切换。 需要使用vue做一个专题页面。 滚动页面指定区域导航高亮。 监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。 ...
阅读 2968·2021-10-13 09:40
阅读 3695·2021-09-22 15:51
阅读 1211·2021-09-22 15:48
阅读 847·2021-09-06 15:00
阅读 1669·2019-08-30 15:43
阅读 2202·2019-08-29 18:35
阅读 1457·2019-08-29 16:18
阅读 3434·2019-08-29 12:49
