JQ:
$(function(){
$(window).scroll(function(){
//获取家用电器div距离顶部的高度
var navs=$(".con").children(".d1").offset().top;
//判断页面滚动的高度是否不小于,家用电器距离顶部的高度
if($(document).scrollTop()>=navs){
$("ul li").fadeIn();
}else{
$("ul li").fadeOut();
}
//获取页面滚动出去的高度
var doctop=$(document).scrollTop();
// 循环获取div的元素
$(".con div").each(function(i,ele){
//循环获取每个div距离顶部的高度
//$(this).offset().top;
// 判断滚动出去的页面是否大于等于当前div距离顶部的距离
if(doctop>=$(this).offset().top){
// 找到div对应的li加上current样式
$("ul li").eq(i).addClass("current").siblings().removeClass();
}
})
})
$("ul li").click(function(){
var idx=$(this).index();
//获取div框距离顶部的高度
var tops=$(".con").children("div").eq(idx).offset().top;
// alert(tops);
$("html").stop().animate({
scrollTop:tops
});
$(this).addClass("current").siblings().removeClass("current");
})
})
HTML:
<ul>
<li class="current">家用电器1</li>
<li>手机通讯2</li>
<li>电脑办公3</li>
<li>精品家具4</li>
</ul>
<div class="nav">菜单栏</div>
<div class="con">
<div class="d1">家用电器1</div>
<div class="d2">手机通讯2</div>
<div class="d3">电脑办公3</div>
<div class="d4">精品家具4</div>
<div style="height: 600px"></div>
</div>