主页 / 网络编程 /

js实现多个标题吸顶效果

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了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;
 : 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';
 }
 
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：你知道JavaScript Symbol类型怎么用吗 下一篇：Vue v-model组件封装(类似弹窗组件)

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by