在一些大型電商頁面上，由于頁面過于長，所以設計人員喜歡在側邊加上一個導航，然后點擊可以快速導航到各個欄目，比如京東商城，這樣不僅方便快捷，而且美觀。

1.基本思路

相比輪播圖，電梯導航貌似簡單得多。
獲取所有樓層的offsetTop值，放在一個數組里面。利用滾動事件監聽window.offsetTop,并且判斷是在數組中那兩個數值區間之間，做出相應的效果。
安利幾個小內容：

    scrollHeight: 獲取對象的滾動高度。 
    scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離 
    scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離 
    scrollWidth:獲取對象的滾動寬度 
    offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度 
    offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置 
    offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 

這幾個是原生js的，自己對應到jQ。

2.代碼

2.1 html代碼

    <div class="side-nav">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
</div>

<div class="floor floor-01"></div>
<div class="floor floor-02"></div>
<div class="floor floor-03"></div>
<div class="floor floor-04"></div>
<div class="floor floor-05"></div>
<div class="floor floor-06"></div>
<div class="floor floor-07"></div>
<div class="footer"></div>

2.2 css代碼

    *{margin:0;padding:0;}
        .side-nav{
            width:50px;
            position:fixed;
            left:0;
            top:20%;
            background:chocolate;
        }
        .side-nav span{
            display:block;
            width:50px;
            height:50px;
            text-align: center;
            line-height: 50px;
            color:#FFF;
            cursor: pointer;
        }
        .side-nav .active{
            border:2px solid #FFF;
        }
        .floor{
            width：100%;
            height:400px;
            margin-bottom: 20px;
            background: pink;
        }
        .footer{
            width:100%;
            height:300px;
            background: pink;
        }

2.3 js代碼

    $(function(){
            //給一個顏色數組
            var colorArr = ['red','orange','yellow','green','blue','cyan','purple'];
            //便利給各個導航“span”元素，和各個對應的樓層欄目元素
            for(i=0;i<$('.side-nav span').length;i++){
                $('.side-nav span').eq(i).css({background:colorArr[i]});
                $('.floor').eq(i).css({background:colorArr[i]});
            }
            
            //安利一下知識點
            //arr.push()
            //push() 方法可把它的參數順序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是創建一個新的數組。
            //offset()
            //JQ中獲取匹配元素在當前視口的相對偏移。返回的對象包含兩個整型屬性：top 和 left。此方法只對可見元素有效。
    
            //獲取各個樓層的距離瀏覽器上部偏移量,并放入數組
            var divTopArr = [];
            for(var i=0;i<$('.floor').length;i++){
                divTopArr.push($('.floor').eq(i).offset().top);
            }
             
            //給導航每個欄目按鈕添加點擊事件，點擊導航上的每個欄目按鈕，html(body)元素滑動到對應的欄目
            $('.side-nav span').click(function(){
                $('body,html').animate({scrollTop:divTopArr[$(this).index()]+'px'});
                $('.side-nav span').removeClass('active');
                $(this).addClass('active');
            })
            
            
            //添加頁面滾輪滾動事件，
            $(window).scroll(function(){
                //獲取獲取頁面當前已經滾動的scrollTop值 
                var scrollTop = $(window).scrollTop();
                //divTopArr 遍歷每一個樓層或者每個樓層對應的按鈕
                for(i=0;i<$('.side-nav span').length;i++){
                    //判斷當前頁面已經滾動的top值是否大于最后一個樓層top偏移量（最后一個要拿出來單算）
                    if(scrollTop < divTopArr[divTopArr.length-1]){
    //          給一個循環動態判斷的條件，若當前scrollTop值大于數組的arr[i],且小于arr[i+1],就對應的欄目按鈕添加樣式
                        if(scrollTop >= divTopArr[i] && scrollTop < divTopArr[i+1]){
                            $('.side-nav span').removeClass('active');
                            $('.side-nav span').eq(i).addClass('active');
                        }
                    }else{
                    //若當前scrollTop值大于數組的arr[length-1](即數組的最后一個值，最后一個欄目的offsetTop),
                        $('.side-nav span').removeClass('active');
                        $('.side-nav span').eq(divTopArr.length-1).addClass('active');
                    }
                }
    
            })
            
        })