js实现多个标题吸顶效果

2023-08-03 09:23:08 232

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

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

一、页面布局及样式

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



实现多个标题的吸顶

header1

header5


*{
padding:0;
margin:0;
}
ul{
width:100%;
}
li{
width:200px;
color:white;
margin:10px;
list-style:none;
border-radius:5px;
border:1pxsolid#191970;
background:#4169E1;
text-align:center;
}
div{
width:100%;
height:30px;
color:white;
padding-left:20px;
background:#DC143C;
}
.box1{
position:fixed;
top:0;
}

二、js的编写

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

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

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

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

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

for(leti=0;i
4、监听window的滚动事件，获取scrollTop；如果滚动高度位于第i个标题的offsetTop和第i+1个标题的offsetTop之间（例如滚动的高度位于header1和header2的offsetTop之间，heade1吸顶），则第i个标题添加box1样式，实现吸顶。
window.onscroll=function(){
//获取滚动的高度
varst=document.documentElement.scrollTop||document.body.scrollTop;

for(leti=0;iot[i]&&st
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代码
varbox=document.getElementsByClassName('box'),//获取所有需要吸顶效果的标题
section=document.getElementsByTagName('section');//获取所有子列表

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

for(leti=0;iot[i]&&st
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js实现多个标题吸顶效果

实现多个标题的吸顶

热门推荐

随机推荐