仿电梯导航案例

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>