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 相关文章推荐
jquery 使用点滴函数代码
May 20 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
详解React的回调渲染模式
Sep 10 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
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
建立文件交换功能的脚本(三)
2006/10/09 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
Python模块包中__init__.py文件功能分析
2016/06/14 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
社区党建工作汇报材料
2014/10/27 职场文书
导游词之镇江焦山
2019/11/21 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python