电梯导航

2015/09/21 36193
<!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 type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script>
$(function(){
	$(window).scroll(function(){
		var num=0;
		var div_t=new Array();
		var div_b=new Array();
		for(var i=0;i<$('div').length;i++){
			//alert($('#div'+(i+1))[0].offsetTop)
			div_t[i]=$('#div'+(i+1))[0].offsetTop-$('li:eq('+i+')')[0].offsetTop;
			div_b[i]=$('#div'+(i+1))[0].offsetTop+$('#div'+(i+1))[0].offsetHeight-$('li:eq('+i+')')[0].offsetTop-$('li:eq('+i+')')[0].offsetHeight;
			if($(window).scrollTop()>div_t[i] && $(window).scrollTop()<div_b[i]){
				
				$('li').css("background","#fff");
				$('li:eq('+i+')').css("background","#C60");
			}
		}
		
	})
	$('li').click(function(){
		var n=$(this).index();
		$(window).scrollTop($('#div'+(n+1))[0].offsetTop-this.offsetTop);
		$('li').css("background","#fff");
		$(this).css("background","#C60");
		
	})
})
</script>
<style>
*{margin:0;}
div{
	font-size:80px;text-align:center;width:800px;margin:0 auto;border:3px solid #ccc;
}
ul{
	position:fixed;top:20px;left:0px;
}
li{
	list-style:none;width:50px;height:50px;line-height:50px;text-align:center;	border:3px solid #ccc;
}
</style>
</head>

<body>
<ul>
<li> div1</li>
<li>div2</li>
<li>div3</li>
<li>div4</li>
<li>div5</li>
<li>div6</li>
<li>div7</li>
<li>div8</li>
<li>div9</li>

</ul>
<div id="div1" style="height:500px;">div1</div>
<div id="div2" style="height:300px;">div2</div>
<div id="div3" style="height:400px;">div3</div>
<div id="div4" style="height:100px;">div4</div>
<div id="div5" style="height:500px;">div5</div>
<div id="div6" style="height:800px;">div6</div>
<div id="div7" style="height:600px;">div7</div>
<div id="div8" style="height:700px;">div8</div>
<div id="div9" style="height:500px;">div9</div>
</body>
</html>
代码片段
