js实现多个标题吸顶效果


Posted in Javascript onJanuary 08, 2020

对于导航的吸顶效果,pc端和移动端的需求可能有些差异。在pc端,我们通常只需要一个顶部导航;在移动端,在滑动页面的时候,更需要多个标题的吸顶(例如地区的选择,需要将省份吸顶)。

单个标题吸顶和多个标题吸顶的区别在于:多个标题吸顶需要确定一个高度范围,在这个范围中只能有一个标题吸顶,其他都是固定效果。

一、页面布局及样式

此处为了测试效果,用了几个重复的section标签,大家根据实际需求编写布局和样式。

<body>
 <ul id="container">
 <h1>实现多个标题的吸顶</h1>
 <section>
  <div class="box">header1</div>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
 </section>
 
 <!--设置多个如header1的子列表,窗口可以进行滚动,此处省略-->
 
 <section>
  <div class="box">header5</div>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
 </section>
 
 </ul>
</body>
<style type="text/css">
 * {
 padding: 0;
 margin: 0;
 }
 ul {
 width: 100%;
 }
 li {
 width: 200px;
 color: white;
 margin: 10px;
 list-style: none;
 border-radius: 5px;
 border: 1px solid #191970;
 background: #4169E1;
 text-align: center;
 }
 div {
 width: 100%;
 height: 30px;
 color: white;
 padding-left: 20px;
 background: #DC143C;
 }
 .box1 {
 position: fixed;
 top: 0;
 }
</style>

二、js的编写

1、获取所有需要吸顶效果的标题。这里的标题最好用相同的布局和样式,获取时能够更快捷和统一。

var box = document.getElementsByClassName('box'), //获取所有需要吸顶效果的标题
  section = document.getElementsByTagName('section'); //获取所有子列表,后面有用

2、获取标题个数和定义一个数组,用来存放每个标题到父元素的距离(offsetTop)。

var ot = [],  //存储每个标题的offsetTop
  len = box.length;   //标题的个数

3、遍历所有标题,获取offsetTop,并存入ot数组中。

for(let i=0; i<len; i++) {
 ot.push(box[i].offsetTop);  //获取每个标题的offsetTop
}

4、监听window的滚动事件,获取scrollTop;如果滚动高度位于第i个标题的offsetTop和第i+1个标题的offsetTop之间(例如滚动的高度位于header1和header2的offsetTop之间,heade1吸顶),则第i个标题添加box1样式,实现吸顶。

window.onscroll = function () {
 //获取滚动的高度
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; i<len; i++) {
 if(st>ot[i] && st<ot[i+1]) { //滚动时监听位置,为标题的吸顶设置一个现实范围
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 
 }
}

5、第四步中,有个问题:当滚动道最后一个标题(i)时,无法获取(i+1)。

解决方法:从第一步中获得的section标签集合中拿出最后一个子列表(section[0]),然后获取最后一个子列表的高度,计算出最后一个标题的显示高度范围,并存入ot数组中。

//获取最后一个子列表的高度,为了设置最后一个吸顶标题的位置
//section[len-1].getBoundingClientRect().height
//此方法返回一个number
 
ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);

三、最后效果

js实现多个标题吸顶效果

js实现多个标题吸顶效果

完整js代码

var box = document.getElementsByClassName('box'), //获取所有需要吸顶效果的标题
 section = document.getElementsByTagName('section'); //获取所有子列表
 
var ot = [],       //存储每个标题的offsetTop
 len = box.length;   //标题的个数
 
for(let i=0; i<len; i++) {
 ot.push(box[i].offsetTop);  //获取每个标题的offsetTop
}
 
//获取最后一个子列表的高度,为了设置最后一个吸顶标题的位置
//section[len-1].getBoundingClientRect().height
//此方法返回一个number
 
ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);
 
window.onscroll = function () {
 //获取滚动的高度
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; i<len; i++) {
 if(st>ot[i] && st<ot[i+1]) { //滚动时监听位置,为标题的吸顶设置一个现实范围
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
传智播客学习之JavaScript基础篇
Nov 13 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 #Javascript
jquery实现吸顶导航效果
Jan 08 #jQuery
JS实现网站吸顶条
Jan 08 #Javascript
js实现移动端吸顶效果
Jan 08 #Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 #Javascript
微信小程序实现吸顶效果
Jan 08 #Javascript
JS实现吸顶特效
Jan 08 #Javascript
You might like
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
大三学生入党思想汇报
2014/01/02 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
2014年教务处工作总结
2014/12/03 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript