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>