javascript - 使用 javascript 和 css 修复元素到达屏幕顶部时的问题

Question

我有一个元素，我希望在它到达屏幕顶部后粘在顶部。

<div id="HeaderWrapper">
  ...
  <div id="Navigation">
    Navigation
  </div>
  ...
</div>

我在 scroll 上添加了一个事件监听器，它将调用一个函数来使用 getBoundingClientRect() 方法检查元素的发布。如果元素的 top 或 y 相对于视口(viewport)小于 0，那么我想修复/粘贴标题。同样，如果它大于 0，那么我想删除固定位置。在这两种情况下，我都添加和删除了一个名为 fixed_navbar 的类，它具有固定位置的属性。

document.addEventListener("scroll", function() {
  const el = document.getElementById("Navigation");
  let rect = el.getBoundingClientRect();
  if (rect.top <= 0) {
    el.classList.add("fixed_navbar");
  } else {
    el.classList.remove("fixed_navbar");
  }
});

您还可以检查 codepen demo .

当元素的位置 top 大于零时，它工作正常。此外，当向下滚动到元素顶部位置小于 0 的位置时，它会粘在页面上并具有固定属性。但是当元素的顶部大于 0 时再次滚动回到位置时，元素仍然具有固定的属性并粘在屏幕的顶部。如何让元素在到达屏幕顶部时粘在顶部，并在元素低于屏幕顶部时再次移除固定位置？

Answer 1

您可以单独使用 CSS 实现此目的，方法是:

position: sticky

声明 position: sticky; 时，您还需要声明 top 样式(例如 top: 0;) 以指示您希望元素在哪一点变得“卡住”。

工作示例:

header {
height: 600px;
}

.navigation {
position: sticky;
top: 0;
margin-top: 150px;
}

<header>
<div class="navigation">Navigation</div>
</header>

---

更多信息:

position: sticky 适用于以下浏览器:

https://caniuse.com/#feat=css-sticky