右侧导航 <!-- 右侧导航 --> <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); })