JavaScript實現(xiàn)樓梯滾動特效(jQuery實現(xiàn))

更新時間：2021年09月23日 08:55:52 作者：前端小新_XH

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)樓梯滾動特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

想必大家都用過JD，在它的首頁里面有個很常見的特性：就是 樓梯特效 。

對于程序員的我們，可以說是萬物皆可盤。那么，我們就來盤一下它。

先上要實現(xiàn)的效果圖：

效果功能描述：當點擊右側懸浮的按鈕時，點擊相應模塊，左側內(nèi)容區(qū)域會自動跳轉到該模塊區(qū)域。

下面，上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        li{
            list-style-type: none;
        }
        .top{
            height:900px;
            background : #ddd;
        }
        .footer{
            height : 600px;
            background : #ddd;
        }
        .content{
            height:800px;
        }
        .content h1{
            text-align:center;
            line-height: 80px;
        }
        .stairs-list{
            width : 60px;
            position: fixed;
            right:5%;
            top:50%;
            margin-top:-120px;
            background : #fff;
        }
        .stairs-list li{
            width:50px;
            height:50px;
            line-height: 25px;
            text-align : center;
            padding:5px;
            border-bottom:1px solid #ddd;
        }
        .stairs-list li.active{
            color : orangered;
        }
        .stairs li span{
            display: block;
 
        }
 
    </style>
</head>
<body>
    <div class="top">
    </div>
    <div class="content" style="background-color : yellowgreen ">
        <h1>京東秒殺</h1>
    </div>
    <div class="content" style="background-color : skyblue ">
        <h1>特色優(yōu)選</h1>
    </div>
    <div class="content" style="background-color : #666 ">
        <h1>頻道廣場</h1>
    </div>
    <div class="content" style="background-color : orangered ">
        <h1>為您推薦</h1>
    </div>
    <div class="footer"></div>
 
    <ul class="stairs-list">
        <li>
            <span>京東</span>
            <span>秒殺</span>
        </li>
        <li>
            <span>特色</span>
            <span>優(yōu)選</span>
        </li>
        <li>
            <span>頻道</span>
            <span>廣場</span>
        </li>
         <li>
            <span>為您</span>
            <span>推薦</span>
        </li>
    </ul>
 
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // OOA :
 
        // 1. 初始化數(shù)據(jù);
        // 2. 事件綁定;
        // 3. 根據(jù)scrollTop值判定所在樓層;
        // 4. 效果添加;
        // 5. 根據(jù)點擊事件切換下標;
 
 
        function Stairs( options ){
            this.options = options;
            this.init();
        }
        Stairs.prototype = {
            constructor : Stairs,
            init : function(){
                // 內(nèi)容元素高度數(shù)組;
                this.content_ele_offset_top_list = [];
                // 獲取元素的偏移高度;
                $(this.options.content_selector).offset( function( index , coords) {
                    // 將每一個元素的高度值放入高度列表之中;
                    this.content_ele_offset_top_list.push(coords.top);
                    return coords;
                }.bind(this))
                // 獲取最小高度值;
                var _length  = this.content_ele_offset_top_list.length ; 
                this.min_top = this.content_ele_offset_top_list[0];
                this.max_top = this.content_ele_offset_top_list[_length - 1] + $(this.options.content_selector).last().height();
                this.content_ele_offset_top_list.push(this.max_top);
 
                this.bindEvent();
            },
            bindEvent:function(){
                var $body_html = $("body,html");
                // 保存實例對象的指針;
                // var _this = this;
                var instance = this;
                // 高頻執(zhí)行的scroll事件;
                // 優(yōu)化 : 節(jié)流 ;
                $(document).scroll( function(){
                    var scrollTop = $body_html.scrollTop();
                    this.calStairsIndex(scrollTop);
                }.bind(this))
                
                $(this.options.stairs_selector).click(function(){
                    // 知道當前發(fā)生事件的元素是誰;   this;  因為這jQuery事件綁定處理沒有辦法，在外部傳入當前發(fā)生事件的元素; 這個this不能變;
                    // 當前的實例對象是誰;          this;
                    var index = $(this).index(instance.options.stairs_selector);
                    instance.changeScrollTop(index);
                })
            },
            // 計算當前樓層;
            calStairsIndex : function( st ){
                // 沒有到達樓梯區(qū)域進行隔離;
                if(st < this.min_top || st > this.max_top){ 
                    // console.log(-1);
                    this.index = -1;
                    this.changeStairsBtn();
                    return false 
                };
                // 如果還在范圍之內(nèi)不用繼續(xù)判斷;
                var _list = this.content_ele_offset_top_list;
                // 如果 st 還在當前index 范圍之內(nèi)則不繼續(xù)進行查找;
                if(st >= _list[this.index] && st < _list[this.index + 1]){
                    return false;
                }
                // 遍歷 ;
                for(var i = 0 ; i < _list.length ; i ++){
                    if(st >= _list[i] && st < _list[i + 1]){
                        this.index = i;
                        break;
                    }
                }
                this.changeStairsBtn();
            },
            changeStairsBtn : function(){
                if(this.index === -1){
                    $(this.options.stairs_selector).removeClass("active");
                    return false;
                }
                $(this.options.stairs_selector).eq(this.index).addClass("active")
                .siblings()
                .removeClass("active");
            },
            changeScrollTop : function( index ){
                $("body,html").scrollTop(this.content_ele_offset_top_list[index]);
                // 事件觸發(fā)器;
                $(document).trigger("scroll");
            }
        }
 
        var staris = new Stairs({
            content_selector : ".content",
            stairs_selector  : ".stairs-list li"
        });
        console.log(staris);
 
     
    </script>
</body>
</html>

現(xiàn)在，我們也能實現(xiàn)跟它一樣的功能效果了。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JS前端面試必備——基本排序算法原理與實現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實現(xiàn)方法,結合實例形式詳細分析了JS常見的基本排序算法相關原理、實現(xiàn)方法、時間復雜度及操作注意事項,需要的朋友可以參考下
2020-02-02
javascript中apply/call和bind的使用
本文主要介紹了javascript中apply/call和bind的使用。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
Typescript井字棋的項目實現(xiàn)
本文主要介紹了Typescript井字棋的項目實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
原生JavaScript實現(xiàn)動態(tài)省市縣三級聯(lián)動下拉框菜單實例代碼
像平時購物選擇地址時一樣，通過選擇的省動態(tài)加載城市列表，通過選擇的城市動態(tài)加載縣區(qū)列表，從而可以實現(xiàn)省市縣的三級聯(lián)動，下面使用原生的JavaScript來實現(xiàn)這個功能，需要的朋友參考下吧
2016-02-02
js下獲取div中的數(shù)據(jù)的原理分析
最近用js寫了一個計算器的頁面?；旧鲜褂玫搅?，ul li的幾點用法。用來布局，并且創(chuàng)造出了很不錯的鼠標懸停效果。
2010-04-04
JavaScript實現(xiàn)簡易tab欄切換內(nèi)容欄
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易tab欄切換內(nèi)容欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
驗證碼在IE中不刷新而谷歌等瀏覽器正常的解決方案
在IE中，驗證碼不會刷新而谷歌等其他瀏覽器沒有問題，解決方案就是在驗證碼的切換地址后面加一個隨機的參數(shù)
2014-03-03
淺談JavaScript的函數(shù)及作用域
函數(shù)和作用域是JavaScript的重要組成部分，我們在使用JavaScript編寫程序的過程中經(jīng)常要用到這兩部分內(nèi)容，借助此文一起來鞏固下學習的內(nèi)容吧。
2016-12-12
Javascript中3種實現(xiàn)繼承的方法和代碼實例
這篇文章主要介紹了Javascript中3種實現(xiàn)繼承的方法和代碼實例,這3種方法分別為對象冒充、原型繼承、上二者的混合,需要的朋友可以參考下
2014-08-08
利用JS實現(xiàn)獲取當前系統(tǒng)電量情況
在前端瀏覽器中我們可以通過使用JavaScript的navigator.getBattery()方法來獲取當前系統(tǒng)的電池情況,本文將介紹如何使用這個API以及它在實際應用中的使用,需要的可以參考下
2023-12-12