滚动监听
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动监听 </title>
<script src="http://www.aniu.tv/Public/Common/js/jquery.min.js" type="text/javascript" ></script>
</head>
<style>
.wrapper{
width:500px;
margin:200px auto;
}
.wrapper ol li{
width:400px;
height:600px;
background:#ccc;
margin:10px;
}
.box {
position:fixed;
top:10px;
left:400px;
}
.box a{
display:block;
width:50px;
height:50px;
line-height:50px;
color:#fff;
border-radius:100%;
background:#ccc;
text-align:center;
font-size:20px;
transition:all linear .2s;
}
.box .red{
background:#bf0000;
transition:all linear .2s;
}
</style>
<body>
<div class="wrapper">
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div class="box">
<a href="###" class="red">1</a>
<a href="###">2</a>
<a href="###">3</a>
<a href="###">4</a>
<a href="###">5</a>
</div>
<div>
<button class="one">切换</button>
</div>
<script type="text/javascript">
var Height = $(".wrapper ol li").innerHeight();//单个li 的高
$(window).scroll(function(){
var Top = $(window).scrollTop();// 窗口距离顶部的高
// alert(Num)
$('.box a').eq(parseInt(Top/Height)).addClass("red").siblings().removeClass("red");
});
$('.box a').click(function(){
var One = $(this).index() //a的索引
// alert(One)
$(window).scrollTop(One*Height)
});
</script>
</body>
</html>
