教你用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 当进入了某个区域时返回该区域的下标 当滚动的距离没有离开该区域时返回falseif(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找到对应的卷曲高度，控制页面卷曲。

教你用jquery实现网页的楼梯效果相关推荐

用jQuery实现网页卷轴的效果
用jQuery实现网页卷轴的效果:http://www.56mp.cn/UPLOAD/SmoothPageScroll/ jQuery有能力做出这样的动画滚动,利用其动画功能和" scrol ...
竖直菜单 html,jQuery实现的网页竖向菜单效果代码
本文实例讲述了jQuery实现的网页竖向菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的 ...
jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法
jQuery版本的网页开关灯 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）
本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果. 我们在浏览各大网站页面时,想必大家肯定都遇到过,当阅览一个长页面时,拉到下面部分会出现类似回到顶部的按钮特效吧. 这种点击回到顶部 ...
js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片
要获取网页所有图片,我们可以通过Javascript就能轻松实现,不过要想获得文章或某容器(如:Div)里所有图片,使用JQuery而不是Javascript来实现就会变得更加简单.本文将给你详细介绍 ...
教你开发jQuery插件（转）
教你开发jQuery插件(转) 阅读目录基本方法支持链式调用让插件接收参数面向对象的插件开发关于命名空间关于变量定义及命名压缩的好处工具 GitHub Service Hook 原文: ...
jQuery实现网页右下角悬浮层提示
最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是D ...
【小牛分享】jquery mobile网页demo实例代码下载
原文:[小牛分享]jquery mobile网页demo实例代码下载源代码下载地址:http://www.zuidaima.com/share/1622363259194368.htm 也可以用手机 ...
十条设计原则教你学会如何设计网页布局
网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户网站都使用的是是两列布局,很少用三列布局的. 下面我来分享下我们常用的网页布局格式以及设计技巧. ...

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

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

1.页面布局

2.样式

脚本

全部代码

总结

教你用jquery实现网页的楼梯效果相关推荐

最新文章

热门文章