右侧导航
<!-- 右侧导航 -->
<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/
