JD商城经典爬楼梯布局，看到就是赚到

JD商城经典爬楼梯布局，看到就是赚到

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #menu {
        position: fixed;
        top: 25%;
        left: 40px;
        width: 30px;
        border: 1px solid;
    }

    #menu ul li {
        position: relative;
        width: 30px;
        height: 30px;
        list-style: none;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        cursor: pointer;
        border-bottom: 1px dotted #AAAAAA;
    }

    #menu ul li.last {
        background: #ccc;
        color: black;
        border-bottom: none;
    }

    #menu ul li span {
        display: none;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        color: red;
    }

    #menu ul li:hover span {
        display: block;
        background: darkred;
        color: white;
    }

    #menu ul li span.active {
        display: block;
        background: darkred;
        color: white;
    }

    #menu ul li:hover span.active {
        display: block;
        background: darkred;
        color: white;
    }

    #header,
    #main,
    #footer {
        margin: auto;
        width: 1000px;
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        line-height: 500px;
    }

    #main div {
        height: 700px;
        font-size: 50px;
        color: honeydew;
        line-height: 700px;
    }

    #header {
        height: 500px;
        background: #ccc;
    }

    #footer {
        height: 500px;
        background: #ccc;
    }
</style>



<div id="menu">
    <ul>
        <li>1F <span>服饰</span> </li>
        <li>2F <span>美妆</span> </li>
        <li>3F <span>手机</span> </li>
        <li>4F <span>家电</span> </li>
        <li>5F <span>数码</span> </li>
        <li>6F <span>运动</span> </li>
        <li>7F <span>居家</span> </li>
        <li>8F <span>母婴</span> </li>
        <li>9F <span>食品</span> </li>
        <li>10F <span>图书</span> </li>
        <li>11F <span>服务</span> </li>
        <li class="last">Top</li>
    </ul>
</div>
<div id="header">头部</div>
<div id="main">
    <div class="Louti" style="background: #FF0000;">服饰</div>
    <div class="Louti" style="background: #FF7F00;">美妆</div>
    <div class="Louti" style="background: #FFFF00;">手机</div>
    <div class="Louti" style="background: #00FF00;">家电</div>
    <div class="Louti" style="background: #00FFFF;">数码</div>
    <div class="Louti" style="background: #0000FF;">运动</div>
    <div class="Louti" style="background: #8B00FF;">居家</div>
    <div class="Louti" style="background: aquamarine;">母婴</div>
    <div class="Louti" style="background: pink;">食品</div>
    <div class="Louti" style="background: bisque;">图书</div>
    <div class="Louti" style="background: lightgoldenrodyellow;">服务</div>
</div>
<div id="footer">尾部</div>
<script>
    // 点击时滑动到该楼层
    $("#menu ul li:not(:last)").click(function(){
        $(this).find("span")
            .addClass("active")
            .end()
            .siblings()
            .find("span")
            .removeClass("active");
            var sTop = $(".Louti").eq($(this).index()).offset().top;

            $("body,html").animate({
                "scrollTop": sTop
            }, 1000);
    })
    //点击返回头部

    $(".last").click(function(){
        $("body,html").animate({
            "scrollTop": 0
        }, 1000);
        $("#menu li span").removeClass("active");
    })

    // 滚动条滚动 楼层号
    $(window).scroll(function () {
        //获取页面滚走的距离
        var sTop = $(document).scrollTop();
        // 找到满足某个条件的楼层对象
        var $floor = $(".Louti").filter(function () {
				// console.log('offset:'+$(this).offset().top)
				// console.log('stop:'+sTop)
				// console.log('div:'+$(this).height())
                return Math.abs($(this).offset().top - sTop) < $(this).height() / 2;
        })
        $("#menu li").eq($floor.index())
                .find("span")
                .addClass("active")
                .end()
                .siblings()
                .find("span")
                .removeClass("active");
            
        
    })
</script>