常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类,用于区分当前用户所浏览区域。
假设结构如下:
<div class="container">
<div class="wrapper">
<div class="section" id="section1">section1</div>
<div class="section" id="section2">section2</div>
<div class="section" id="section3">section3</div>
<div class="section" id="section4">section4</div>
<div class="section" id="section5">section5</div>
</div>
<nav>
<a href="#section1" class="current">section1</a>
<a href="#section2">section2</a>
<a href="#section3">section3</a>
<a href="#section4">section4</a>
<a href="#section5">section5</a>
</nav>
</div>
样式如下
body {
margin: 0;
}
.container {
height: 100%;
background-color: #fff;
}
.wrapper {
margin-right: 300px;
}
.wrapper .section {
height: 400px;
line-height: 400px;
text-align: center;
color: #fff;
font-size: 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 {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 300px;
padding: 60px 0;
background: rgb(244, 246, 248);
box-sizing: border-box;
text-align: center;
}
nav a {
display: block;
margin: 10px 0;
color: #333;
text-decoration: none;
}
nav .current {
color: #13c2c2;
font-weight: bold;
}
页面滚动时导航定位
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://github.com/wangshikun...
以上基本上满足了业务的基本需求,这是工作中总结的经验,仅供参考,有错误请指出,谢谢!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。