使用 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 demo。

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

Answer 1

您可以单独使用 CSS 来实现这一点，方法是：

position: sticky

在声明position: sticky; 时，还需要声明top 样式（例如top: 0;）以指示您希望元素在什么时候“卡住”。 p>

工作示例：

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

Answer 2

试试这个

 if (rect.top <= 0) {

如果你写的 rect.top 不符合你的要求

Answer 3

@Rounin 提供了一个很棒的解决方案。虽然我用 JavaScript 解决了你的问题。你可以看看这个

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

function myFunction() {
    if ( document.body.scrollTop < 100 ) {
        el.classList.remove("fixed_navbar");
    } 
  }
  }
});

* {
  margin: 0;
  padding: 0;
}

#HeaderWrapper {
  background: lightgrey;
  height: 1500px;
}

.box {
  background: skyblue;
  width: 100%;
  height: 100px;
}

#Navigation {
  background: green;
}

.fixed_navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;
  left: 0;
  top: 0;
}

<div id="HeaderWrapper">
  <div class="box"></div>
  <div id="Navigation">
    Navigation
  </div>
</div>