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入门第一课 jQuery选择符
Mar 14 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
详解vue-cli3使用
Aug 14 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 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
PHP数学运算与数据处理实例分析
2016/04/01 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python字符串详细介绍
2015/05/09 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
Why do we need Unit test
2013/01/03 面试题
应届毕业生简历自我评价
2014/01/31 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
计算机实训心得体会
2016/01/14 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
MySQL分区表管理命令汇总
2022/03/21 MySQL
Python OpenCV超详细讲解基本功能
2022/04/02 Python