仿电梯导航案例

 $(function(){
        $(window).scroll(function(){
            //获取家用电器div距离顶部的高度
            var navs=$(".con").children(".d1").offset().top;
            if($(document).scrollTop()>=navs){ //判断页面滚动的高度是否不小于，家用电器距离顶部的高度
                $("ul li").stop().fadeIn();
            }else{
                $("ul li").stop().fadeOut();
            }
        })
        $("ul li").click(function(){
            var idx=$(this).index();
            //获取div框距离顶部的高度
            var tops=$(".con").children("div").eq(idx).offset().top;
            // alert(n);
            $("html").stop().animate({
                scrollTop:tops
            })
        })
    })


HTML：

    <ul>
        <li>家用电器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>