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

本帖最后由 oDianDian12345 于 2012-10-11 09:49:00 编辑

解决方案 »

  1.   

    参考：<!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>