Javascript实现页面滚动时的导航和智能定位

在通用开发页面中可能有一个需求，这里有多个模块，每个模块对应一个导航。当页面滚动到某个模块时，需要在对应的模块导航中添加一个类来区分当前用户浏览的区域。

假设的结构如下：

div class=' container ' div class=' wrapper ' div class=' section ' id=' section 1 ' section 1/div class=' section ' id=' section 2 ' section 2/div class=' section 3 ' section 3/div class=' section ' id=' section 4 ' section 4/div class=' section ' id=' section 5 ' section 5/div/div nav a href=' # section 1 ' rel=' externafollow ' class=' current ' section 1/a href=' #

Js代码如下：

Var $navs=$('nav a ')，//navigation $sections=$(')。section ')，//module $ window=$ (window)，nav length=$ nav s . length-1；$window.on('scroll '，function(){ var scroll top=$ window . scroll top()，len=navLengthfor(；len-1；len-){ var the=$ sections . eq(len)；if (scrollTop=that.offset()。top){ $ navs . remove class(' current ')。eq(透镜)。add CLaSS(' current ')；打破；} }});效果如下：

不难看出，基本原理是当窗口滚动时，从后向前依次遍历模块。如果窗口的滚动高度大于或等于与当前模块页面顶部的距离，则当前模块对应的导航将高亮显示，遍历将不会继续。

点击导航页面

除了这个需求之外，还有一个需求，就是点击导航，定位到导航对应的模块顶部。

代码如下：

$navs.on('click ')，函数(e){ e . preventdefault()；$('html，body ')。动画({ 'scrollTop': $($(this))。attr('href ')。偏移量()。top }，400)；});效果如下：

以上基本满足了业务的基本需求。这是工作中总结出来的经验。希望对大家的学习有帮助，支持我们。