js怎么实现多个标题吸顶效果

这篇文章主要介绍js怎么实现多个标题吸顶效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联服务项目包括乐业网站建设、乐业网站制作、乐业网页制作以及乐业网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,乐业网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到乐业省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

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

一、页面布局及样式

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


 
 

实现多个标题的吸顶

 
  header1
  
  • 1
  •   
  • 1
  •   
  • 1
  •   
  • 1
  •   
  • 1
  •   
  • 1
  •          
      header5
      
  • 1
  •   
  • 1
  •   
  • 1
  •   
  • 1
  •   
  • 1
  •   
  • 1
  •      
    
     * {
     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;
     }
    

    二、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

    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; 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怎么实现多个标题吸顶效果

    js怎么实现多个标题吸顶效果

    完整js代码

    var box = document.getElementsByClassName('box'), //获取所有需要吸顶效果的标题
     section = document.getElementsByTagName('section'); //获取所有子列表
     
    var ot = [],       //存储每个标题的offsetTop
     len = box.length;   //标题的个数
     
    for(let i=0; iot[i] && st

    以上是“js怎么实现多个标题吸顶效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


    本文题目:js怎么实现多个标题吸顶效果
    网页链接:http://pwwzsj.com/article/jdegdp.html

    其他资讯