<!DOCTYPE HTML>
<html>
<head>
<title>导航定位</title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: '微软雅黑';
}
div {
height: 400px;
border: 1px solid red;
width: 600px;
}
ul {
overflow: hidden;
position: fixed;
top: 300px;
left: 650px;
}
li {
width: 40px;
height: 40px;
background: #3F883E;
text-align: center;
line-height: 40px;
color: #fff;
,
font-size: 18px;
cursor: pointer;
border-bottom: 1px solid #fff;
}
li.active {
width: 38px;
height: 38px;
margin-bottom: 1px;
border: 1px solid #3F883E;
background: #fff;
color: #666;
}
</style>
<body>
<div class="div1">段落1</div>
<div class="div2">段落2</div>
<div class="div3">段落3</div>
<div class="div4">段落4</div>
<div class="div5">段落5</div>
<div class="div6">段落6</div>
<div class="div7">段落7</div>
<ul>
<li class="li1 active">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
<li class="li4">4</li>
<li class="li5">5</li>
<li class="li6">6</li>
<li class="li7">7</li>
</ul>
<script type="text/javascript">
/* 滚动监听 */
// 定义一个获取所有div的距离高度
var arrOffsetTop = [
$('.div1').offset().top,
$('.div2').offset().top,
$('.div3').offset().top,
$('.div4').offset().top,
$('.div5').offset().top,
$('.div6').offset().top,
$('.div7').offset().top
];
// 获取每个div的平均高度
var fTotalHgt = 0;
for (var i = 0; i < $('div').length; i++) {
fTotalHgt += $('div').eq(i).outerHeight();
}
var fAverageHgt = parseFloat(fTotalHgt / $('div').length);
// 滚动事件(每次滚动都做一次循环判断)
$(window).scroll(function() {
for (var i = 0; i < $('div').length; i++) {
if ($(this).scrollTop() > arrOffsetTop[i] - fAverageHgt) { // 减去一个固定值,是定位准确点
$('ul li').eq(i).addClass('active').siblings().removeClass('active');
}
}
});
/* 点击事件 */
$('ul li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('body, html').animate({
scrollTop: arrOffsetTop[$(this).index()]
}, 500);
});
</script>
</body>
</html>