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 跨域访问问题解决方法
Dec 02 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
vuex入门最详细整理
Mar 04 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
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
Laravel 5 学习笔记
2015/03/06 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
vue源码入口文件分析(推荐)
2018/01/30 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python实现登录与注册系统
2020/11/30 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
图书室管理制度
2014/01/19 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
党员承诺书格式
2014/05/21 职场文书
《小小的船》教学反思
2016/02/18 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
新手初学Java List 接口
2021/07/07 Java/Android
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS
基于redis+lua进行限流的方法
2022/07/23 Redis