jq实现的楼层效果
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;
width: 100px;
text-align: center;
background: #f01;
color: #ffffff;
cursor:pointer;
}
a{
color: #ffffff;
text-decoration: none;
}
#a1{background: #dddddd;
height: 900px;
width: 90%;
margin-left: 10%;
}
#a2{background: #dddddd;
height: 900px;
width: 90%;
margin-left: 10%;
}
#a3{background: #dddddd;
height: 900px;
width: 90%;
margin-left: 10%;
}
#a4{background: #dddddd;
height: 900px;
width: 90%;
margin-left: 10%;
}
#a5{background: #dddddd;
height: 900px;
width: 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>
<p id="main">
<p id="a1">
这是一个悲惨的故事
p>
<p id="a2">这是一个欢快的故事p>
<p id="a3">这是一个伤心的故事p>
<p id="a4">这是一个幸福的故事p>
<p id="a5">这是一个狗血的故事p>
p>
<footer>
<p style="height: 900px;width: 100%">底部p>
footer>
body>
<script src="jquery-1.11.3.js">script>
<script>
var daohang=$("#LouDao");//楼层标签
var li=$("#LouDao>li");//获取目录li
var main=$("#main>p");//文章主要内容
$(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};
}
// new delay();
// console.log(delay(daohang).top);
script>
html>
