<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery滚动面板的实现</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
*{padding: 0; margin: 0;list-style: none;}
#wrap{background: red; width: 500px; height: 3000px; margin: 0 auto;}
h2{margin-bottom: 1000px;}
#nav{width: 50px;height: 150px; border: 1px solid blue; position: fixed;bottom: 0;right: 0;}
#nav li{border-bottom: 1px solid blue; height: 50px; text-align: center; line-height: 50px; font-size: 30px;}
#nav li a{text-decoration: none;}
/*预定义样式，表示所处的楼层*/
.current{background:blue;}
.current a{color: white;}
</style>
</head>
<script type="text/javascript">
$(function(){
$("#nav li").hover(function() {
$(this).addClass('current');
}, function() {
$(this).removeClass('current');
});
//通过判断滚动条的高度和楼层高度来制定样式。
$(window).scroll(function() {
var top = $(document).scrollTop();
//第二个标题1022，第三个标题2048;
//用于添加样式的函数。
function addStyle(index){
$("#nav li").removeClass();
$("#nav li:eq("+index+")").addClass('current');
}
if (top<=1022) {
addStyle(0);
}else if (top>1022 && top<=2048) {
addStyle(1);
}else if (top>2048) {
addStyle(2);
};
});
});
</script>
<body>
<div id="wrap">
<h2 class="num1" id="target1">这是第一个标题</h2>
<h2 class="num2" id="target2">这是第二个标题</h2>
<h2 class="num3" id="target3">这是第三个标题</h2>
</div>
<ul id="nav">
<li class="current"><a href="#target1">1F</a></li>
<li><a href="#target2">2F</a></li>
<li><a href="#target3">3F</a></li>
</ul>
</body>
</html>
