分享一款滚动的菜单,智能定位到页面指定位置。
菜单HTML
<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>
楼层HTML
<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>
menu.js
$(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);
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791