关于jQuery滚动页面改变导航状态
请您指导下，谢谢了！
源码如下：
- JScript code
<!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空间的那个时间轴
[解决办法]
参考：
- HTML code
<!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>