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获取和设置表单元素的方法
Feb 14 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
js实现带搜索功能的下拉框
Jan 11 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
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
PHP读取XML值的代码(推荐)
2011/01/01 PHP
写出高质量的PHP程序
2012/02/04 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
jquery 学习笔记一
2010/04/07 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
vue中实现左右联动的效果
2018/06/22 Javascript
Python ljust rjust center输出
2008/09/06 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
Python下载网络小说实例代码
2018/02/03 Python
pandas带有重复索引操作方法
2018/06/08 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
艺术设计专业个人求职信
2013/09/21 职场文书
全陪导游欢迎词
2014/01/17 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
培训讲师开场白
2015/06/01 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android