楼层点亮效果

楼层点亮效果

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        position: relative;
    }
    ul {
        position: absolute;
        left: 0;
        top: 300px;
    }

    li {
        height: 40px;
        line-height: 40px;
        list-style: none;
        width: 100px;
        text-align: center;
        background: #f01;
        color: #ffffff;
        cursor: pointer;
    }

    a {
        color: #ffffff;
        text-decoration: none;
    }

    #a1 {
        background: #dddddd;
        height: 400px;
        width: 90%;
        margin-left: 10%;
    }

    #a2 {
        background: #dddddd;
        height: 400px;
        width: 90%;
        margin-left: 10%;
    }

    #a3 {
        background: #dddddd;
        height: 900px;
        width: 90%;
        margin-left: 10%;
    }

    #a4 {
        background: #dddddd;
        height: 200px;
        width: 90%;
        margin-left: 10%;
    }

    #a5 {
        background: #dddddd;
        height: 800px;
        width: 90%;
        margin-left: 10%;
    }

    .active {
        background: #ddd;
    }

    .active>a {
        color: #000;
    }
    #main {
        overflow: hidden;
    }
</style>

<ul id="fixedtool">
    <li class="active"><a>爱逛好货</a></li>
    <li><a>好店直播</a></li>
    <li><a>品质特色</a></li>
    <li><a>实惠热卖</a></li>
    <li><a>猜你喜欢</a></li>
</ul>
<div id="main">
    <div id="a1">
        爱逛好货系列
    </div>
    <div id="a2">好店直播系列</div>
    <div id="a3">品质特色系列</div>
    <div id="a4">实惠热卖系列</div>
    <div id="a5">猜你喜欢系列</div>
</div>

<script>
    var daohang = $("#fixedtool"); //楼层标签
    var li = $("#fixedtool>li"); //获取目录li
    var main = $("#main>div"); //文章主要内容
    window.onbeforeunload = onbeforeunload_handler;  
    function onbeforeunload_handler() {
        window.location.reload();  
        $(window).scrollTop(0)
    }
    $(window).scroll(function() {
        //获取到页面总高度
        var HeightAll = $("html,body").height();
        //获取滚动条位置
        var iTop = $(window).scrollTop();
        for (var i = 0; i < main.length; i++) {
            //楼层的显示和隐藏
            if (iTop >= 160) {
                daohang.css({"position":"fixed","top":"160px"})
            } else {
                daohang.css({"position":"absolute","top":"300px"})
            };
            //楼层的联动
            var num = 0
            for (var i = 0; i < main.length; i++) {
                if (iTop >= main[i].offsetTop) {
                    num = i;
                }
                li[i].className = ''; //设置li中的class为空
            };
            li[num].className = 'active';
            for (var i = 0; i < li.length; i++) {
                li[i].onclick = function() {
                    for (var j = 0; j < li.length; j++) {
                        if (this == li[j]) {
                            $("html,body").animate({
                                scrollTop: main[j].offsetTop
                            }, 500);
                        }
                    }
                }
            }
        }
    })
</script>