滚动时如何阻止反应组件越过页面顶部

Question

我想让它在用户向下滚动页面时做到这一点，我的一个反应组件到达页面顶部，并停留在那里，不再向上。

Imgur 链接到正在构建的“内联网”应用程序：https://imgur.com/a/nWdDOrC

在图像中，带有粗红色边框的组件在滚动时应保持在页面顶部，并留有边距。尝试固定位置，但我不希望它是静态的，只是不能滚动到页面顶部。

还有其他类似的问题，但似乎没有一个可以完全解决这个特定问题 - 如果我错了，请纠正我。

Answer 1

您应该查看 css 中的 sticky 位置。

粘性元素根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置 - 然后它“粘”在适当的位置（如 position:fixed）。

.component {
  position: sticky;
  top: 0;
}

参考：https://www.w3schools.com/howto/howto_css_sticky_element.asp