为什么不定位:Chrome中的粘性工作？

Question

你怎么position: sticky上班的？

我在Chrome 26.0.1410.43 m中尝试了以下操作但它无法正常工作:

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

http://jsfiddle.net/8LRms/

根据这个,它应该工作:

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

Chrome 23.0.1247.0似乎支持它,但现在它在26.0.1410.43 m中不起作用.

Answer 1

在很短的时间内,Chrome --enable-experimental-webkit-features在其about:flags部分的标志后面启用了此功能.但是,由于浏览器重新绘制的效率低下,它很快就被删除了.

从Chrome 56开始,此功能在没有标志的情况下再次启用.

自Chrome 52.0.2743.116起,此功能--enable-experimental-webkit-features再次由该标志启用.

要回答关于删除原因的更新问题:position: sticky由于规范的未完成性质,Google(Chromium)取消了支持,他们将专注于平均时间内的其他滚动功能:

"我们希望最终实现位置:粘粘的,但目前的实现不与现有的滚动和合成系统很好地结合的方式设计.例如,位置:粘依靠updateLayerPositionsAfterDocumentScroll正常工作,但功能有没有其他目的,否则可以被删除.同样,position:sticky完全不适用于合成溢出滚动,这现在是驱动引擎滚动的默认机制.

一旦我们按顺序获得滚动和合成的房子,我们应该返回到位置:粘性并以与引擎其余部分很好地集成的方式实现该功能.但是现在,这个CL删除了我们当前的实现,因此我们可以专注于改进我们已经发布的滚动功能的实现."

强调我的.你可以在这里阅读更多相关信息.

Answer 2

编辑:你需要--enable-experimental-webkit-features通过启用标志启动about:flags.

更新:这不适用于Chrome v35到v51,Chrome 52使用实验性网络平台功能标志重新启用此功能.从Chrome 56开始,position: sticky开箱即用.

Answer 3

FilamentGroup发布了一个很好的polyfill for position: sticky.看看:https://github.com/filamentgroup/fixed-sticky

Answer 4

如果存在具有overflow: hidden属性集的父节点,它似乎在iOS7 Safari上不起作用.