何时使用 css 粘性定位？答案

【问题标题】：When to use position sticky with css?何时使用 css 粘性定位？
【发布时间】：2013-12-09 20:29:09
【问题描述】：

我从来没有使用过position: sticky; 并在MDN 上找到了这个，但我不明白我什么时候应该使用这个位置。谁能想象一下这个位置？

【问题讨论】：

也许这有帮助：updates.html5rocks.com/2012/08/…。但我不认为它被支持，因为它被标记为“实验性”，并说你不应该在生产代码中使用它。

【解决方案1】：

如acticle中所述：

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

和position: fixed基本一样，只是sticky元素不能脱离父元素。使用 top 的偏移位置，您可以设置粘性元素何时应随页面滚动的属性。例如，当 top 设置为 10px 时，当 top 距离窗口屏幕 10px 时，它将与页面一起滚动：

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

它还没有实现。但是你可以测试这个实验属性。

在 chrome 中，您可以通过以下链接启用 enable-experimental-web-platform-features 标志： 关于：//flags/#enable-experimental-web-platform-features

Example page of the acticle

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

【讨论】：

喜欢 jquery 粘性滚动框？
@zey 是的，它基本上是一样的 :) 感谢您的关注！

【解决方案2】：

您从verry same source 了解到“粘性”

sticky（这是一个实验性 API，不应在生产代码中使用。）

盒子的位置是按照正常流计算的（这叫做正常流中的位置）。然后盒子偏移相对于它的流根和包含块，在所有情况下，包括表格元素，不影响任何位置以下框。当一个盒子 B 被粘性定位时，下面的框的计算就像 B 没有偏移一样。这 ‘position:sticky’对表格元素的影响与for相同 ‘位置：相对’。

将鼠标悬停在同一页面上的该图标上

关于可用性的其他参考资料：

http://caniuse.com/#search=position（这里没有粘性）
http://caniuse.com/#search=stic（也没有粘性）

【讨论】：