滚动浮动菜单
效果简介：滚到那个栏目 一个fixed元素的栏目名就变色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html{
height: 2000px;
}
ul li{
width:100%;
height:200px;
margin-bottom:100px;
background:#333;
color:#fff;
}
.active{display:block;width:150px;height:28px;color: red;background: #ff00ff;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<div style="position:fixed;top:50%;left:20%;">
<a href="#aaa" data-top="-216">11121</a>
<a href="#bbb" data-top="-216">11121</a>
<a href="#ccc" data-top="-216">11121</a>
<a href="#ddd" data-top="-216">11121</a>
<a href="#eee" data-top="-216">11121</a>
</div>
<ul>
<li id="aaa">111111</li>
<li id="bbb">222222</li>
<li id="ccc">33333</li>
<li id="ddd">44444</li>
<li id="eee">55555</li>
</ul>
<script>
var oli=document.getElementsByTagName("li");
var oa=document.getElementsByTagName("a");
var arr=[];
window.onscroll=function(){
scrolltop(200,100);
}
function scrolltop(height,values){
for (var i = 0; i < oli.length; i++) {
if(oli[i].getBoundingClientRect().top>-(height+values)&&oli[i].getBoundingClientRect().top<=0){
oa[i].className="active";
}else{
oa[i].className="";
}
}
}
</script>
</body>
</html>演示地址:http://sandbox.runjs.cn/show/4leijpig
