实现多个标题的吸顶

最新推荐文章于 2022-01-06 19:34:44 发布

暴走的奶糖

最新推荐文章于 2022-01-06 19:34:44 发布

阅读量424

点赞数 2

分类专栏：前端移动端文章标签： javascript 多个标题吸顶吸顶

本文链接：https://blog.csdn.net/weixin_42881744/article/details/106220862

版权

移动端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

19 篇文章 1 订阅

订阅专栏

<html>
  <head>
    <title>实现多个标题的吸顶</title>
  </head>

  <body>
    <ul id="container">
      <h1>实现多个标题的吸顶</h1>
      <section>
        <div class="box">header1</div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </section>

      <!--设置多个如header1的子列表，窗口可以进行滚动，此处省略-->
      <section>
        <div class="box">header2</div>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </section>
      <section>
        <div class="box">header3</div>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </section>
      <section>
        <div class="box">header4</div>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </section>
      <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>
      <section>
        <div class="box">header6</div>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </section>
      <section>
        <div class="box">header7</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>
  <script type="text/javascript">
    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'
        }
      }
    }
  </script>
</html>

暴走的奶糖

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现多个标题的吸顶

<html> <head> <title>实现多个标题的吸顶</title> </head> <body> <ul id="container"> <h1>实现多个标题的吸顶</h1> <section> <div class="box">header1</div> <li&
复制链接

扫一扫