在网页滚动时，设置让某个元素固定到顶部

伏玉.

已于 2023-11-22 20:41:17 修改

阅读量838

点赞数

文章标签： javascript 前端开发语言

于 2023-11-22 20:22:08 首次发布

本文链接：https://blog.csdn.net/qq_73993347/article/details/134561661

版权

本文用到了js.

主要代码部分：

其中one为想要固定的div元素

oft为记录one元素相对网页顶部的偏移量

Math.trunc()为取整函数

window.addEventListener()监听网页的滚动事件，当网页向上滚动的距离超过oft时，固定元素，否则恢复元素

document.documentElement.scrollTop为获取页面向上滚动距离

固定元素的方法为将其CSS的position属性设置为fixed.

并设置距离窗口顶部位置为0：one.style.top = '0';

解除固定的方法则为将其CSS的position属性设置为static.

并恢复元素相对网页顶部的偏移量oft

<script>
    const one = document.querySelector(".one")
    const oft = one.offsetTop
    window.addEventListener('scroll', function () {
      // console.log(document.documentElement.scrollTop)
      if (Math.trunc(document.documentElement.scrollTop) >= oft) {
        one.style.position = 'fixed';
        one.style.top = '0';
      }
      else if (Math.trunc(document.documentElement.scrollTop) < oft) {
        console.log('ff')
        one.style.position = 'static'
        one.style.offsetTop = oft;
      }
    })
  </script>

完整代码，运行查看效果

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11.7</title>
  <style>
    div {
      width: 200px;
      height: 200px;
    }

    .one {
      margin-top: 0px;
      background-color: skyblue;
      height: 200px;
      width: 200px;
    }
  </style>
</head>

<body style="height: 1500px;">
  <div></div>
  <div class="one"></div>
  <script>
    const one = document.querySelector(".one")
    const oft = one.offsetTop
    window.addEventListener('scroll', function () {
      // console.log(document.documentElement.scrollTop)
      if (Math.trunc(document.documentElement.scrollTop) >= oft) {
        one.style.position = 'fixed';
        one.style.top = '0';
      }
      else if (Math.trunc(document.documentElement.scrollTop) < oft) {
        console.log('ff')
        one.style.position = 'static'
        one.style.offsetTop = oft;
      }
    })
  </script>
</body>

</html>