css - 为什么不定位: sticky work in 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 在他们的 about:flags 部分中通过标记 --enable-experimental-webkit-features 启用了此功能。但是，由于浏览器重新绘制的方式效率低下，它很快就被删除了。

截至 Chrome 56 , 此功能再次启用而没有标志。

---

从 Chrome 52.0.2743.116 开始，此功能再次通过标志 --enable-experimental-webkit-features 启用。

---

要回答有关为何删除的更新问题:由于规范未完成，Google (Chromium) 删除了对 position: sticky 的支持，他们将同时关注其他滚动功能:

"We would eventually like to implement position: sticky, but the current implementation isn't designed in a way that integrates well with the existing scrolling and compositing system. For example, position: sticky relies upon updateLayerPositionsAfterDocumentScroll to function correctly, but that function has no other purpose and can otherwise be removed. Similarly, position: sticky doesn't work at all with composited overflow scrolling, which is now the default mechanism for driving scrolling in the engine.

Once we've got our scrolling and compositing house in order, we should return to position: sticky and implement the feature in a way that integrates well with the rest of the engine. For now, however, this CL removes our current implementation so we can focus on improving our implementation of the scrolling features we've already shipped."

强调我的。您可以阅读更多相关信息 here .