189 8069 5689

js怎么实现多个标题吸顶效果-创新互联

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

创新互联建站专注于企业营销型网站建设、网站重做改版、信阳网站定制设计、自适应品牌网站建设、H5网站设计、成都商城网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为信阳等各大城市提供网站开发制作服务。

对于导航的吸顶效果，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怎么实现多个标题吸顶效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
    另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
                
    
            文章名称：js怎么实现多个标题吸顶效果-创新互联            
    
            网站URL：http://cdxtjz.cn/article/doeodo.html

    其他资讯