<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
position: fixed;
left: 0;
top: 30%;
}
li {
height: 40px;
line-height: 40px;
list-style: none;
100px;
text-align: center;
background: #f01;
color: #ffffff;
cursor: pointer;
}
a {
color: #ffffff;
text-decoration: none;
}
#a1 {
background: #dddddd;
height: 400px;
90%;
margin-left: 10%;
}
#a2 {
background: #dddddd;
height: 400px;
90%;
margin-left: 10%;
}
#a3 {
background: #dddddd;
height: 900px;
90%;
margin-left: 10%;
}
#a4 {
background: #dddddd;
height: 200px;
90%;
margin-left: 10%;
}
#a5 {
background: #dddddd;
height: 600px;
90%;
margin-left: 10%;
}
.active {
background: #ddd;
}
.active>a {
color: #000;
}
#LouDao {
display: none;
}
#main {
overflow: hidden;
}
</style>
</head>
<body>
<ul id="LouDao">
<li><a>第一章</a></li>
<li><a>第二章</a></li>
<li><a>第三章</a></li>
<li><a>第四章</a></li>
<li><a>第五章</a></li>
</ul>
<div id="main">
<div id="a1">
这是一个悲惨的故事
</div>
<div id="a2">这是一个欢快的故事</div>
<div id="a3">这是一个伤心的故事</div>
<div id="a4">这是一个幸福的故事</div>
<div id="a5">这是一个狗血的故事</div>
</div>
<footer>
<div style="height: 900px; 100%">底部</div>
</footer>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
var daohang = $("#LouDao"); //楼层标签
var li = $("#LouDao>li"); //获取目录li
var main = $("#main>div"); //文章主要内容
$(window).scroll(function() {
//获取到页面总高度
var HeightAll = $("html,body").height();
//获取滚动条位置
var iTop = $(window).scrollTop();
for (var i = 0; i < main.length; i++) {
//楼层的显示和隐藏
if (iTop >= main[0].offsetTop) {
daohang.show();
} else {
daohang.hide();
};
//楼层的联动
var num = 0
for (var i = 0; i < main.length; i++) {
if (iTop >= main[i].offsetTop) {
num = i;
}
li[i].className = ''; //设置li中的class为空
};
li[num].className = 'active';
for (var i = 0; i < li.length; i++) {
li[i].onclick = function() {
for (var j = 0; j < li.length; j++) {
if (this == li[j]) {
$("html,body").animate({
scrollTop: main[j].offsetTop
}, 500);
}
}
}
}
}
})
function delay(obj) {
var l = 0;
var t = 0;
while (obj) {
l = l + obj.offsetLeft;
t = t + obj.offsetTop;
obj = obj.offsetParent;
}
return {
left: l,
top: t
};
}
</script>
</html>