JavaScript to achieve stair rolling special effects (jQuery implementation)

I believe everyone has used JD. There is a very common feature on its homepage: the staircase special effect .

For us programmers, everything can be disked. So, let’s take a look at it.

First, let’s take a look at the effect diagram to be achieved:

Effect function description: When you click the floating button on the right, click the corresponding module, and the content area on the left will automatically jump to the module area.

Below, the code:

<!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>Jingdong Flash Sale</h1>
    </div>
    <div class="content" style="background-color : skyblue ">
        <h1>Featured Selection</h1>
    </div>
    <div class="content" style="background-color : #666 ">
        <h1>Channel Plaza</h1>
    </div>
    <div class="content" style="background-color : orangered ">
        <h1>Recommended for you</h1>
    </div>
    <div class="footer"></div>
 
    <ul class="stairs-list">
        <li>
            <span>JD.com</span>
            <span>Second kill</span>
        </li>
        <li>
            Features
            <span>Preferred</span>
        </li>
        <li>
            <span>Channel</span>
            <span>Square</span>
        </li>
         <li>
            <span>For you</span>
            <span>Recommendations</span>
        </li>
    </ul>
 
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // OOA:
 
        // 1. Initialize data;
        // 2. Event binding;
        // 3. Determine the floor based on the scrollTop value;
        // 4. Effect addition;
        // 5. Switch subscript according to click event;
 
 
        function Stairs( options ){
            this.options = options;
            this.init();
        }
        Stairs.prototype = {
            constructor : Stairs,
            init : function(){
                // Content element height array;
                this.content_ele_offset_top_list = [];
                // Get the offset height of the element;
                $(this.options.content_selector).offset( function( index , coords) {
                    // Put the height value of each element into the height list;
                    this.content_ele_offset_top_list.push(coords.top);
                    return coords;
                }.bind(this))
                // Get the minimum height value;
                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");
                //Save the pointer of the instance object;
                // var _this = this;
                var instance = this;
                // High-frequency scroll events;
                // Optimization: Throttling;
                $(document).scroll( function(){
                    var scrollTop = $body_html.scrollTop();
                    this.calStairsIndex(scrollTop);
                }.bind(this))
                
                $(this.options.stairs_selector).click(function(){
                    // Know which element the event is currently occurring on; this; Because this jQuery event binding process has no way to pass in the element where the event is currently occurring externally; this this cannot be changed;
                    //Who is the current instance object; this;
                    var index = $(this).index(instance.options.stairs_selector);
                    instance.changeScrollTop(index);
                })
            },
            // Calculate the current floor;
            calStairsIndex : function( st ){
                // Did not reach the staircase area for isolation;
                if(st < this.min_top || st > this.max_top){ 
                    // console.log(-1);
                    this.index = -1;
                    this.changeStairsBtn();
                    return false 
                };
                // If it is still within the range, no need to continue judging;
                var _list = this.content_ele_offset_top_list;
                // If st is still within the current index range, do not continue searching;
                if(st >= _list[this.index] && st < _list[this.index + 1]){
                    return false;
                }
                // Traverse;
                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]);
                // Event trigger;
                $(document).trigger("scroll");
            }
        }
 
        var staris = new Stairs({
            content_selector : ".content",
            stairs_selector : ".stairs-list li"
        });
        console.log(staris);
 
     
    </script>
</body>
</html>

Now, we can achieve the same functional effect.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: