什么时候使用位置粘css？

Question

我从来没有使用过这个position: sticky;并且在MDN上发现了这个但是无法理解我什么时候应该使用这个位置.任何人都能看到这个位置吗？

Answer 1

正如文章中所述：

position:sticky 是一种定位元素的新方法，概念上与position:fixed 类似。不同之处在于，带有position:sticky的元素在其父元素中的行为类似于position:relative，直到在视口中满足给定的偏移阈值。

它基本上是一样的，position: fixed但是粘性元素不能离开父元素。通过顶部的偏移位置，您可以设置粘性元素何时应随页面滚动的属性。例如，当顶部设置为 10px 时，当顶部距窗口屏幕 10px 时，它将随页面滚动：

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 10px;
}

目前尚未实施。但是您可以测试这个实验属性。

在 Chrome 中，您可以通过以下链接启用启用实验网络平台功能标志： about://flags/#enable-experimental-web-platform-features

文章的示例页面

您可以使用 Jquery 插件来模仿此行为：stickyfill