什么时候使用位置粘css？

Question

我从未使用position: sticky;并在MDN上发现了这一点，但无法理解我应该何时使用此位置。任何人都可以看到这个位置吗？

Answer 1

如acticle：

中所述

  

position：sticky是一种定位元素的新方法，在概念上也是如此   类似于职位：固定。区别在于一个元素   position：sticky的行为类似于position：相对于其父级，   直到视口中满足给定的偏移阈值。

它与position: fixed基本相同，但粘性元素不能超出父元素。使用top的偏移位置，您可以设置粘性元素应与页面一起滚动的属性。因此，例如当top设置为10px时，当顶部距离窗口屏幕10px时，它将与页面一起滚动：

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

尚未实现。但是您可以测试此实验属性。

在Chrome中，您可以通过以下链接启用enable-experimental-web-platform-features标志： 约：//标志/＃使实验性的web-于平台的功能

Example page of the acticle

---

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

Answer 2

来自verry same source您所读到的'粘性'

  

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

     

根据正常流量计算箱子位置（这称为正常流量中的位置）。然后该框被抵消   相对于其流量根和包含块，并且在所有情况下，   包括表元素，不影响任何位置   以下方框。当盒子B粘在一起时，它的位置   计算下面的框，好像B没有偏移。该   'position：sticky'对表元素的影响与for相同   'position：relative'。

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

关于可用性的其他参考：

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