关于吸顶的问题想请教一下

发布于
2020-09-19

新手上路，请多包涵

想实现吸顶的效果，搜索后发现可以使用getBoundingClientRect来实现。但我测试的时候发现当元素到达吸顶的条件后，继续往下滚动，吸顶元素会在static和fixed之间来回切换导致元素一直在闪烁。打印top值会发现一会是正常的top值，一会是0，想请问下是为什么？
以下是代码

  <style>
    p {
      margin: 0;
      height: 47px;
    }
    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9;
    }
  </style>
</head>
<body>
<div style="background-color: red; height: 200px;">12312321</div>
<div style="height: 47px">
  <p id="p">吸顶</p>
</div>
<div style="background-color: yellow; height: 2000px;">12312321</div>
<script>
window.addEventListener('scroll', function () {
  const p = document.querySelector('#p');
  const top = p.getBoundingClientRect().top;
  console.log(top)
  if (top < 0) {
    p.classList.add('fixed');
  } else {
    p.classList.remove('fixed');
  }
})
</script>

css javascript

阅读 2.8k

3 个回答

zangeci

✓ 已被采纳

getBoundingClientRect是相对视图窗口的.所以你应该获取父元素的top。

const top = p.parentElement.getBoundingClientRect().top;

其实也可以用offsetTop，

if (p.parentElement.offsetTop <= (document.documentElement.scrollTop || document.body.scrollTop)) {
    p.classList.add('fixed');
} else {
    p.classList.remove('fixed');
}

君迹我心

5.1k41927

发布于
2020-09-19

更新于
2020-09-19

你不能用 #p 与窗口的位置参数来判断，不然往上滚动的时候就会出现：