关于jQuery滚动页面改变导航状态

oDianDian12345 2012-10-11 09:40:56

请您指导下，谢谢了！
源码如下：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>test</title> 

<style type="text/css"> 

body,ul,li{margin:0;padding:0;list-style:none;font-size:12px;}a{color:#fff;text-decoration:none;} 

#nav{width:100px;position:fixed;} 

#nav li{width:100px; background:#666;height:30px;line-height:30px;margin-bottom:10px; cursor:pointer;} 

#nav li.hover{background:#000;} 

#boxWrap{margin-left:100px;} 

.box1{height:500px;background:#f00;} 

.box2{height:1000px;background:#0F0;} 

.box3{height:1200px;background:#3FF;} 

.box4{height:800px;background:#00F;} 

</style> 

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 

//<![CDATA[ 

$(function(){ 

var $li = $('#nav>li'); 

$li.eq(0).addClass("hover"); 

$li.click(function(){ 

var index = $(this).index(), 

     divHeight = $("#boxWrap").children("div:eq("+index+")").offset().top; 

$(this).addClass("hover").siblings().removeClass("hover"); 

$("body,html").animate({'scrollTop':divHeight},600); 

}); 

}); 

//]]> 

</script> 





</head> 



<body> 

<ul id='nav'> 

<li><a href="#">test</a></li> 

<li><a href="#">test</a></li> 

<li><a href="#">test</a></li> 

<li><a href="#">test</a></li> 

</ul> 

<div id="boxWrap"> 

<div class="box1"></div> 

<div class="box2"></div> 

<div class="box3"></div> 

<div class="box4"></div> 

</div> 

</body> 

</html>

现在该怎么判断滚动到相应的div的时候让导航上相应的选项也高亮？就像腾讯QQ空间的那个时间轴

...全文

115 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

persuit666 2012-10-11

打赏
举报

需求没描述清楚。

kongxh1218 2012-10-11

打赏
举报

参考：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>test</title> 

<style type="text/css"> 

body,ul,li{margin:0;padding:0;list-style:none;font-size:12px;}a{color:#fff;text-decoration:none;} 

#nav{width:100px;position:fixed;} 

#nav li{width:100px; background:#666;height:30px;line-height:30px;margin-bottom:10px; cursor:pointer;} 

#nav li.hover{background:#000;} 

#boxWrap{margin-left:100px;} 

.box1{height:500px;background:#f00;} 

.box2{height:1000px;background:#0F0;} 

.box3{height:1200px;background:#3FF;} 

.box4{height:800px;background:#00F;} 

</style> 

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 

//<![CDATA[ 

$(function(){ 

var $li = $('#nav>li'); 

$li.eq(0).addClass("hover"); 

$li.click(function(){ 

var index = $(this).index(), 

     divHeight = $("#boxWrap").children("div:eq("+index+")").offset().top; 

$(this).addClass("hover").siblings().removeClass("hover"); 

$("body,html").animate({'scrollTop':divHeight},600); 

}); 



// 找到boxWrap下面几个div的定位

var boxPosition = {};

$("#boxWrap div").each(function(){

	boxPosition[$(this).attr("class")] = $(this).offset().top;

});



$(window).bind("scroll", function(){

	// 当前滚动条滚动的高度

	var curScrollTop = $(window).scrollTop();

	

	// 匹配到第几个box

	var curBoxIndex = 0;

	

	var boxIndex = 0;

	for (var boxName in boxPosition) {

		var boxTop = boxPosition[boxName];

		if (curScrollTop >= boxTop) {

			curBoxIndex = boxIndex;

		}

		boxIndex++;

	}

	

	// 高亮显示

	var allLi = $("#nav li");

	allLi.css("backgroundColor", "#666");

	allLi.eq(curBoxIndex).css("backgroundColor", "#000000");

});



}); 

//]]> 

</script> 





</head> 



<body> 

<ul id='nav'> 

<li><a href="#">test</a></li> 

<li><a href="#">test</a></li> 

<li><a href="#">test</a></li> 

<li><a href="#">test</a></li> 

</ul> 

<div id="boxWrap"> 

<div class="box1"></div> 

<div class="box2"></div> 

<div class="box3"></div> 

<div class="box4"></div> 

</div> 

</body> 

</html>