模仿京东楼层跳转效果，附注释

时间 2019-11-05
标签模仿京东楼层效果注释繁體版
原文原文链接
<!DOCTYPE html>
<html>javascript
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 700px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .main .floor{
            height: 400px;
            font-size: 60px;
            color: white;
            text-align: center;
            line-height: 400px;
        }
        .red{
            background: red;
        }
        .blue{
            background: blue;
        }
        .green{
            background: green;
        }
        .purple{
            background: purple;
        }
        .pink{
            background: pink;
        }
        .yellow{
            background: yellow;
        }
        .floorMenu{
            list-style: none;
            width: 40px;
            border: 1px solid black;
            border-bottom: none;
            position: fixed;
            top: 40px;
            left: 40px;
        }
        .floorMenu li{
            width: 40px;
            height:40px;
            line-height: 40px;
            border-bottom: 1px solid black;
            text-align: center;
        }
        .floorMenu li.active{
            background: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="main">
        <ul class="floorMenu">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <div class="floor red">1</div>
        <div class="floor blue">2</div>
        <div class="floor green">3</div>
        <div class="floor purple">4</div>
        <div class="floor pink">5</div>
        <div class="floor yellow">6</div>
    </div>
</body>

<script type="text/javascript">
    //1. 得到每层楼距离页面顶部的距离，并将它们放入一个数组中。
    var floorArr = [];
    $(".floor").each(function(){
        let everyTop = $(this).offset().top;    //每一个div距离页面顶部的距离。
        floorArr.push(everyTop);
    })
    
    //2. 监听滚动条滚过的距离，根据距离去判断滚到了那一层楼。
        //2.1 绑定滚动事件，而且得到滚动的距离            
        //用on来绑定的事件可使用off取消，由于点击楼层的时候，会有附带的跑马灯效果。方便取消监听。
        $(window).on("scroll",scrollMove)
        function scrollMove(){
            //滚动条滚动的距离
            var scrollTop = $(window).scrollTop()+100;
            var index = 0;
            for(var i=0; i<floorArr.length; i++){
                var now = floorArr[i];    //当前楼层距离顶部的距离
                var next = floorArr[i+1];    //下一楼层距离顶部的距离。
                if(scrollTop>=now && scrollTop<next){
                    index = i;
                }else if(scrollTop>=floorArr[floorArr.length-1]){
                    index = floorArr.length-1;
                }
            }
            
        //3. 根据楼层索引，去改变楼层导航的样式
            $(".floorMenu li").eq(index).addClass("active").siblings("li").removeClass("active")      
        }
        //4. 给楼层导航绑定点击事件。
        $(".floorMenu li").click(function(){
            //取消滚动监听
            $(window).off("scroll");
            $(this).addClass("active").siblings("li").removeClass("active");
            //得到点击li的索引。
            var idx  = $(this).index();
            //根据索引获取楼层顶部距离
            var sTop = floorArr[idx];
            $(document.body).animate({
                scrollTop:sTop
            },500,function(){    //回调函数，由于取消了监听事件，因此在点击完以后，在次调用监听事件。
                $(window).on("scroll",scrollMove)
            })
            
        })
</script>
</html>css