解决方法:
页面主体设置相同的结构如:
<body>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</body>
当我们页面下上滑动的时候 利用当前div 的offset().top的值与页面滚动的距离作比较,进而获取当前页面主体显示的是哪个div(class为items的div),进而去对应导航栏上的对应选项,达到切换效果)
代码:
$(window).scroll(function(){
var top=document.documentElement.scrollTop || document.body.scrollTop;
var curId = ""; // 当前页面 div 快 的id
var items = $('.items');
items.each(function(i,e){
var m = $(this);
var itemsTop = m.offset().top;
if(top>itemsTop-250){
curId = "#" + m.attr("id");
}else{
return false;
}
});
// 这里我们获取到当前主体显示的div,可以知道当前div的id,根据当前div的信息去对应导航栏的选项,可以进行导航栏切换
// 或者进行其他操作
});