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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
聊天室php&amp;mysql(一)
2006/10/09 PHP
php 地区分类排序算法
2013/07/01 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP基本语法实例总结
2016/09/09 PHP
php创建类并调用的实例方法
2019/09/25 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
Python的装饰器用法学习笔记
2016/06/24 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
Ajax的工作原理
2015/12/04 面试题
物业电工岗位职责
2013/11/20 职场文书
毕业生的自我评价
2013/12/30 职场文书
七一建党日演讲稿
2014/09/05 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
Java对文件的读写操作方法
2022/04/29 Java/Android