js实现多个标题吸顶效果
更新时间：2020年01月08日 10:16:58 作者：扇子shanzi
这篇文章主要为大家详细介绍了js实现多个标题吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
对于导航的吸顶效果，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代码
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';
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
我们已经知道，null 没有任何的属性值，并且无法获取其实体（existence）值。所以 null.property 返回的是错误（error）而不是 undefined 。2008-08-08
随便打开一个网页，基本上都会看到无缝滚动或者轮播图，比如淘宝还有360官网的首页。那么这些滚动效果是怎么实现的呢？下面小编给大家分享关于网页中的无缝滚动的js代码，感兴趣的朋友一起看下吧2016-06-06
ES6中的Promise.all()和Promise.race()函数的实现方法
这篇文章主要介绍了ES6的Promise.all()和Promise.race()函数,结合实例代码介绍了ES6 Promise.race和Promise.all方法使用，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-02-02
在JavaScript中,几乎每一个值都是某种特定类型的对象,于是ES6也着重提升了对象的功能性,下面这篇文章主要给大家介绍了关于es6新增对象实用方法的相关资料,需要的朋友可以参考下2022-05-05
这里是seajs loader的核心部分，有些IE兼容的部分还不是很明白，主要是理解各个模块如何依赖有序加载，以及CMD规范2012-11-11
这篇文章主要介绍了js获取鼠标位置的方法,结合实例形式详细分析了JavaScript响应鼠标事件获取并操作页面元素属性的相关技巧,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了javascript实现倒计时关闭广告，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
Add a Picture to a Microsoft Word Document
Add a Picture to a Microsoft Word Document...2007-06-06
这篇文章主要介绍了javascript 实现des解密加密的过程,需要的朋友可以参考下2014-04-04
本文主要介绍了webpack入门的一些简单命令和基本配置信息，从代码拆分、打包、压缩的角度和传统的前端项目进行对比，希望以此加深大家对webpack基础知识的印象。下面跟着小编一起来看下吧2017-01-01
最新评论