Jquery 网站跟踪当前位置

2048
右侧导航
<!-- 右侧导航 -->
<div class="right-menu" id="n-mune">
    <ul>
    <li class="current" _ke="#cur1" tit="新品發布"></li>
    <li _ke="#cur2" tit="推薦商品"></li>
    <li _ke="#cur3" tit="獨傲品牌"></li>
    <li _ke="#cur4" tit="招商加盟"></li>
    <li _ke="#cur5" tit="新聞資訊"></li>
    </ul>
</div>
<!-- 右侧导航 end -->
<div class="container">
   <div class="contai-bor" id="cur1"></div>
   <div class="contai-bor" id="cur2"></div>
   <div class="contai-bor" id="cur3"></div>
   <div class="contai-bor" id="cur4"></div>
   <div class="contai-bor" id="cur5"></div>
</div>


//跟踪
    $(window).scroll(function(){
    var top = $(document).scrollTop(),
    menu = $("#n-mune"),
    cur = $(".container").find(".contai-bor");
    var curId = "";
    cur.each(function(){
        var m = $(this);
         var itemsTop = m.offset().top;
         if(top > itemsTop - 100){
             curId = "#" + m.attr("id");
         }else{
             return false;
         }
    });
    var curLink = menu.find("ul>li");
    if( curId && curLink.attr("_ke") != curId && top > 0){
         curLink.removeClass("current");
         menu.find( "[_ke=" + curId + "]" ).addClass("current");
    } else {
         menu.find("li:eq(0)").addClass("current").siblings().removeClass("current");
    }
    });
    
//锚点跳转    
    $("#n-mune ul li").on("click", function () {
        $("body,html").stop().animate({
            scrollTop : $($(this).attr("_ke")).offset().top
        }, 700);
    })

玄玄博客:http://www.blogxuan.com/