JavaScript实现楼梯滚动特效(jQuery实现)

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

这篇文章主要为大家详细介绍了JavaScript实现楼梯滚动特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

想必大家都用过JD，在它的首页里面有个很常见的特性：就是 楼梯特效 。

对于程序员的我们，可以说是万物皆可盘。那么，我们就来盘一下它。

先上要实现的效果图：

效果功能描述：当点击右侧悬浮的按钮时，点击相应模块，左侧内容区域会自动跳转到该模块区域。

下面，上代码：

<!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>特色优选</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>优选</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. 初始化数据;
        // 2. 事件绑定;
        // 3. 根据scrollTop值判定所在楼层;
        // 4. 效果添加;
        // 5. 根据点击事件切换下标;
 
 
        function Stairs( options ){
            this.options = options;
            this.init();
        }
        Stairs.prototype = {
            constructor : Stairs,
            init : function(){
                // 内容元素高度数组;
                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;
                // 高频执行的scroll事件;
                // 优化 : 节流 ;
                $(document).scroll( function(){
                    var scrollTop = $body_html.scrollTop();
                    this.calStairsIndex(scrollTop);
                }.bind(this))
                
                $(this.options.stairs_selector).click(function(){
                    // 知道当前发生事件的元素是谁;   this;  因为这jQuery事件绑定处理没有办法，在外部传入当前发生事件的元素; 这个this不能变;
                    // 当前的实例对象是谁;          this;
                    var index = $(this).index(instance.options.stairs_selector);
                    instance.changeScrollTop(index);
                })
            },
            // 计算当前楼层;
            calStairsIndex : function( st ){
                // 没有到达楼梯区域进行隔离;
                if(st < this.min_top || st > this.max_top){ 
                    // console.log(-1);
                    this.index = -1;
                    this.changeStairsBtn();
                    return false 
                };
                // 如果还在范围之内不用继续判断;
                var _list = this.content_ele_offset_top_list;
                // 如果 st 还在当前index 范围之内则不继续进行查找;
                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]);
                // 事件触发器;
                $(document).trigger("scroll");
            }
        }
 
        var staris = new Stairs({
            content_selector : ".content",
            stairs_selector  : ".stairs-list li"
        });
        console.log(staris);
 
     
    </script>
</body>
</html>

现在，我们也能实现跟它一样的功能效果了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS循环中正确使用async、await的姿势分享
async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,下面这篇文章主要给大家介绍了关于JS循环中正确使用async、await的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2021-12-12
Canvas 绘制粒子动画背景
本文主要分享了Canvas 绘制粒子动画背景的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
js修改table中Td的值(定义td的双击事件)
这次是更改后的代码实现以下功能：去掉了“确定”，“取消”按钮。变单击为双击事件，用户按ESC键，取消更改感兴趣的朋友可以了解下
2013-01-01
JavaScript中的object转换函数toString()与valueOf()介绍
这篇文章主要介绍了JavaScript中的object转换函数toString()与valueOf()介绍,需要的朋友可以参考下
2014-12-12
js实现tab切换效果实例
这篇文章主要介绍了js实现的tab标签切换效果，功能非常简单，实现了点击切换的效果，推荐给大家，有需要的小伙伴可以参考下。
2015-09-09
JS点击缩略图整屏居中放大图片效果
今天开发的时候，遇到要点击缩略图之后居中显示图片的大图查看（大致效果如上图所示）~想了好几种实现方式,下面通过本文给大家分享JS点击缩略图整屏居中放大图片效果，需要的朋友参考下吧
2017-07-07
JavaScript命名约定的最佳实践指南
js命名应遵循简洁、语义化的原则,下面这篇文章主要给大家介绍了关于JavaScript命名约定的最佳实践指南,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
js计算字符串长度包含的中文是utf8格式
使用js写的计算字符串长度且其中中文是utf8格式的，具体的实现如下，感兴趣的朋友可以参考下
2013-10-10
微信小程序（订阅消息）功能
这篇文章主要介绍了微信小程序订阅消息功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
使用jsonp完美解决跨域问题
在项目中遇到错误提示“No 'Access-Control-Allow-Origin' header is present on the requested resource.”查了下度娘，这个问题和安全机制有关，默认不允许跨域调用，这里记录一下解决方案，防止以后再犯相同的错误。
2014-11-11

JavaScript实现楼梯滚动特效(jQuery实现)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具