教你用jquery实现网页的楼梯效果

在各大电商网站中经常看到如图所示右边的楼梯效果，当我们滚动页面滚动道不同的分栏的时候，右边的提示框相应的也会发生变化，并且点击提示框上的不同按钮，可以跳转到对应的节点。这个功能怎么实现的呢？

1.页面布局

写出几个大的色块表示每一个模块，增加一个ul作为右边的提示框

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

2.样式

主要是给右边的提示框添加定位效果，时期固定在右边的某个位置。

<style>         *{             margin:0;             padding:0;         }         li{             list-style-type: none;         }         .top{             height:900px;             background : #ddd;         }         .footer{             height : 1000px;             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> 

脚本

首先引入jquery

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 

<script> //构造函数 options对象中共两个属性用来选取页面地每一个模块和选取提示框。 function Stairs(options){     this.options = options;     this.init(); } Stairs.prototype = {     constructor:Stairs,     init:function(){     	//声明一个数组用来存储每一个模块距离顶部的距离         this.content_top_list = [];         $(this.options.content_selector).offset(function(index,coords){              this.content_top_list.push(coords.top);             return coords;         }.bind(this));         //这一步是给数组中添加一个项，在后面数组的时候的时候我们需要与最后一个模块的位置比对，以确保是否离开了判定区域，因此要添加一个footer的距离顶部的高度，也就是最后一个模块的距离顶部高度加上自己的高度。         this.first = this.content_top_list[0];         this._last = this.content_top_list[this.content_top_list.length-1] + $(this.options.content_selector).last().height();         this.content_top_list.push(this._last);         this.bindEvent();     },     bindEvent:function(){          var $body_html = $("body,html");          //此处我们需要用到鼠标点击的this因此我们需要把实例对象存储起来          var instance = this;          $(document).scroll(function(){              var scrolltop = $body_html.scrollTop();               this.calStairsIndex(scrolltop);          }.bind(this));          //绑定鼠标点击事件 当鼠标点击时 获取对应的下标 将页面滚动到改下表对应的卷动高度的位置          $(this.options.stairs_selector).click(function(){              var index = $(instance.options.stairs_selector).index(this);              instance.changeScrollTop(index);          })     },     calStairsIndex:function(st){     	//当滚动的距离在最小以下或者最大以上时返回index=-1 当进入了某个区域时返回该区域的下标 当滚动的距离没有离开该区域时返回false         if(st < this.first || st > this._last){              this.index = -1;              this.changeStairsBtn();              return false;         }         if(st >= this.content_top_list[this.index] && st < this.content_top_list[this.index + 1 ]){             return false;         }         for(var i = 0; i < this.content_top_list.length ; i++){             if(st >= this.content_top_list[i] && st < this.content_top_list[i + 1 ]){                 this.index = i;                 break;             }         }         this.changeStairsBtn();     },         changeStairsBtn:function(){     //首先清除所有的li上的active 然后判定index的值 如果为-1就不给任何li添加active 如果不为-1就给对应下标的li添加active类 这样就可以有页面滚动 li随之变化的特效          var stairs = $(this.options.stairs_selector);          stairs.removeClass("active");          if(this.index === -1){              return false;          }          stairs.eq(this.index).addClass("active");     },     changeScrollTop:function(index){          $("body,html").scrollTop(this.content_top_list[index]);     }     } new Stairs({     content_selector:".content",     stairs_selector:".stairs-list li" });         </script> 

全部代码

<!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 : 1000px;             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>        function Stairs(options){            this.options = options;            this.init();        }        Stairs.prototype = {            constructor:Stairs,            init:function(){                this.content_top_list = [];                $(this.options.content_selector).offset(function(index,coords){                     this.content_top_list.push(coords.top);                    return coords;                }.bind(this));                this.first = this.content_top_list[0];                this._last = this.content_top_list[this.content_top_list.length-1] + $(this.options.content_selector).last().height();                this.content_top_list.push(this._last);                this.bindEvent();            },            bindEvent:function(){                 var $body_html = $("body,html");                 var instance = this;                 $(document).scroll(function(){                     var scrolltop = $body_html.scrollTop();                      this.calStairsIndex(scrolltop);                 }.bind(this));                 $(this.options.stairs_selector).click(function(){                     var index = $(instance.options.stairs_selector).index(this);                     instance.changeScrollTop(index);                 })            },            calStairsIndex:function(st){                if(st < this.first || st > this._last){                     this.index = -1;                     this.changeStairsBtn();                     return false;                }                if(st >= this.content_top_list[this.index] && st < this.content_top_list[this.index + 1 ]){                    return false;                }                for(var i = 0; i < this.content_top_list.length ; i++){                    if(st >= this.content_top_list[i] && st < this.content_top_list[i + 1 ]){                        this.index = i;                        break;                    }                }                this.changeStairsBtn();            },            changeStairsBtn:function(){                 var stairs = $(this.options.stairs_selector);                 stairs.removeClass("active");                 if(this.index === -1){                     return false;                 }                 stairs.eq(this.index).addClass("active");            },            changeScrollTop:function(index){                 $("body,html").scrollTop(this.content_top_list[index]);            }            }        new Stairs({            content_selector:".content",            stairs_selector:".stairs-list li"        });              </script> </body> </html> 

总结

1.首先清除楼梯特效的原理，其实就是根据卷曲高度给切换active的位置。
2.本效果一共有两个事件：页面滚动事件，鼠标点击事件
3.滚动事件：获取每一个页面的距离顶部的高度，注意添加一个最大高度，判断卷曲高度与存储高度的 大小关系以确定index值，根据index给对应的li添加类
4.点击事件：点击li获取对应的index，根据index找到对应的卷曲高度，控制页面卷曲。