使用 javascript 和 css 在到达屏幕顶部时修复元素

Question

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

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

我在 上添加了一个事件侦听器scroll，它将调用一个函数来使用getBoundingClientRect()方法检查元素的发布。如果元素的top或y相对于视口小于 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 演示。

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

Answer 1

您可以仅使用 CSS 来实现此目的，方法是：

position: sticky

声明时，position: sticky;您还需要声明一个top样式（例如top: 0;）来指示您希望元素在哪个点“卡住”。

工作示例：

position: sticky

header {
height: 600px;
}

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

更多信息：

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

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

Answer 2

尝试这个

 if (rect.top <= 0) {

在 if 条件下，您编写rect.top < 0这不符合您的要求