拖动滚动条实现侧栏导航定位效果
大家可能看到过这样的导航效果，那就是拖动滚动条的时候，能够实现侧栏导航定位效果。
也就是说没到滚动条移动到一个栏目位置，那么侧栏导航也能够实现定位，下面就通过代码实例详细介绍一下如何实现此功能，需要的朋友可以做一下参考，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
body, html {
background-color: #f6f6f6;
}
div {
height: 600px;
line-height: 500px;
border: solid 1px #ccc;
background-color: #fff;
text-align: center;
}
ul {
position: fixed;
height: 40px;
line-height: 40px;
top: 100px;
}
li {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border: solid 1px #ccc;
}
li:hover {
background-color: #ccc;
color: #fff;
}
li.active {
background-color: #cc5;
color: #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
$('li').on('click', function () {
var index = $(this).index();
var scrollTo = $('.content').eq(index).offset().top;
$('body').animate({
scrollTop: scrollTo
}, 200);
$(this).addClass('active').siblings().removeClass('active');
})
var barItemTops = [];
$('li').each(function (index, element) {
barItemTops.push($(this).position().top + 100);
})
console.log(barItemTops)
$(window).on('scroll', function () {
var winScrollTop = $(this).scrollTop();
$('.content').each(function (index, element) {
var selfOffsetTop = $(this).offset().top;
if (0 <= selfOffsetTop - winScrollTop && selfOffsetTop - winScrollTop < barItemTops[index]) {
$('li').eq(index).addClass('active').siblings().removeClass('active');
}
})
})
})
</script>
</head>
<body>
<ul class="nav">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="content div1">前端教程网一</div>
<div class="content div2">前端教程网二</div>
<div class="content div3">前端教程网三</div>
<div class="content div4">前端教程网四</div>
<div class="content div5">前端教程网五</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.左侧导航条固定效果是由如下代码实现的:
ul {
position: fixed;
height: 40px;
line-height: 40px;
top: 100px;
}
top值等于100px要特别注意一下，因为后面会用到。
（2）.鼠标悬浮导航栏目实现变色效果是由如下代码实现的:
ul {
position: fixed;
height: 40px;
line-height: 40px;
top: 100px;
}
（3）.$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（4）.$('li').on('click', function () {})，为li元素注册时间处理函数，当点击li元素的时候也能够实现导航效果。
（5）.var index = $(this).index()，获取当前点击li元素的索引值。
（6）.var scrollTo = $('.content').eq(index).offset().top，获取对应索引的div元素距离文档顶端的距离。
（7）.$('body').animate({ scrollTop: scrollTo
}, 200)，以动画方式设置body的scrollTop值，这样就会使对应索引的div块顶端到达窗口顶端。
（8）.$(this).addClass('active').siblings().removeClass('active')，为当前元素添加名称为active的样式类，其他的li元素则删除它，于是就实现了当前li元素呈现绿色的效果。
（9）.var barItemTops = []，声明一个数组，后面会用到。
（10）.$('li').each(function (index, element) {
barItemTops.push($(this).position().top + 100);
})，获取每一个li元素的position().top值，再加上100，恰好是每一个li元素顶端，距离窗口顶端的尺寸。
（11）.$(window).on('scroll', function () {})，为window注册scroll事件处理函数。
（12）.var winScrollTop = $(this).scrollTop()，网页向上滚动的尺寸。
（13）.$('.content').each(function (index, element) {})，遍历每一个div元素。
（14）.var selfOffsetTop = $(this).offset().top，获取div元素距离文档顶部的距离。
（15）.if (0 <= selfOffsetTop - winScrollTop && selfOffsetTop - winScrollTop < barItemTops[index]) {
$('li').eq(index).addClass('active').siblings().removeClass('active');
}，selfOffsetTop - winScrollTop值就是div元素的顶端距离窗口顶端的尺寸。
也就是如果这个尺寸大0并且小于侧边栏导航对应的li元素顶端距离窗口顶端的距离，那么将设置对应li元素的相关样式。
拖动滚动条实现侧栏导航定位效果，这样的场景在实际项目中还是用的比较多的，关于拖动滚动条实现侧栏导航定位效果就介绍到这了。
拖动滚动条实现侧栏导航定位效果属于前端实例代码，有关更多实例代码大家可以查看。