模仿京東樓層跳轉效果，附註釋

時間 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