<div id="menu">
<ul>
<li><a href="#item1" class="cur">One</a></li>
<li><a href="#item2">Two</a></li>
<li><a href="#item3">Three</a></li>
<li><a href="#item4">Four</a></li>
<li><a href="#item5">Fir</a></li>
</ul>
</div> <div id="content">
<div class="item" id="item1">
<h1>1F</h1>
</div>
<div class="item" id="item2">
<h1>2F</h1>
</div>
<div class="item" id="item3">
<h1>3F</h1>
</div>
<div class="item" id="item4">
<h1>4F</h1>
</div>
<div class="item" id="item5">
<h1>5F</h1>
</div>
</div> $(function(){
$(window).scroll(function(){
var top = $(document).scrollTop(); //定义变量,获取滚动条的高度
var menu = $("#menu"); //定义变量,抓取#menu
var items = $("#content").find(".item"); //定义变量,查找.item
var curId = ""; //定义变量,当前所在的楼层item #id
items.each(function(){
var m = $(this); //定义变量,获取当前类
var itemsTop = m.offset().top; //定义变量,获取当前类的top偏移量
if(top > itemsTop-100){
curId = "#" + m.attr("id");
}else{
return false;
}
});
//给相应的楼层设置cur,取消其他楼层的cur
var curLink = menu.find(".cur");
if( curId && curLink.attr("href") != curId ){
curLink.removeClass("cur");
menu.find( "[href=" + curId + "]" ).addClass("cur");
}
// console.log(top);
});
});
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
