为什么Chrome浏览器不支持position: sticky属性？

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中不起作用。

- Petah

---

你有没有访问你发布的链接上的演示页面？http://html5-demos.appspot.com/static/css/sticky.html 当我访问时，它告诉我：你的浏览器不支持position: sticky!! - Steve

我不知道它是否是或不是... 我只是指出你已经在你发布的页面上有了答案。 - Steve

好吧，我真的不是故意要表现得很聪明……但这解释了为什么它不起作用。因为你的浏览器不支持position: sticky。我猜你需要更新你的问题，问一下“为什么我的浏览器过去支持它，现在却不支持了？” - Steve

@Steve问题已更新。 - Petah

http://caniuse.com/css-sticky - Danield

Answer 1

短暂时间内，Chrome在其about:flags部分通过一个标志--enable-experimental-webkit-features启用了这个功能。然而，由于浏览器重绘的低效率，它很快被移除了。

截至Chrome 56版本，此功能再次无需标志即可启用。

---

截至Chrome 52.0.2743.116版本，此功能再次通过标志--enable-experimental-webkit-features启用。

---

为了回答关于为什么移除的更新问题：Google（Chromium）移除了对position: sticky的支持，原因是该规范尚未完成，他们将在此期间专注于其他滚动功能：

“我们最终希望实现position: sticky，但当前的实现方式并没有很好地集成到现有的滚动和合成系统中。例如，position: sticky依赖于updateLayerPositionsAfterDocumentScroll才能正确地工作，但该函数没有其他用途，可以被删除。同样，position: sticky无法与合成溢出滚动一起使用，而这现在是引擎中驱动滚动的默认机制。

一旦我们整理好了滚动和合成方面的问题，我们应该返回到position: sticky，并以一种与引擎的其余部分良好集成的方式来实现该功能。但是，目前，这个CL会移除我们当前的实现，以便我们专注于改进我们已经发布的滚动功能的实现。”

强调是我的。您可以在这里阅读更多相关信息。

- TylerH

---

我知道的原因是Chrome内部的实现不够好，所以他们取消了整个功能。据我所知，规范是没问题的。Chrome正在进行新的实现工作：https://www.chromestatus.com/features/6190250464378880 - Mikko Rantalainen

@MikkoRantalainen 是的，规范没问题；自从Chrome将其从浏览器中删除以来，其他多个浏览器已经实现了它。尽管“正在进行”是一个含糊的术语，但他们仍在同一跟踪器上继续处理它。 - TylerH

我理解到"Chromium[...]由于规范未完成的性质而删除了支持[...]"声称该规范未完成，这听起来对我来说不正确。 - Mikko Rantalainen

@MikkoRantalainen 那是他们的措辞，抱歉。 - TylerH

在启用了“enable-experimental-web-platform-features”标志的情况下，又可以在v52中工作了：https://bugs.chromium.org/p/chromium/issues/detail?id=231752 - franzo

@franzo \o/ 哈利路亚 - TylerH

Answer 2

编辑: 你需要在启动时使用--enable-experimental-webkit-features标志并通过about:flags进行启用。

更新: 在Chrome v35到v51版本中无法使用此功能，Chrome 52可以通过实验性Web平台功能标志重新启用此功能。从Chrome 56开始，position: sticky可以直接使用。

- AlienWebguy

---

它可以与你的<h1>一起使用，但不能与<thead>一起使用。要么这种类型的元素尚未被添加到支持中，要么不可能实现。将thead的显示更改为block或inline-block也没有任何作用。坚持使用自然的块级或内联块级元素，你就应该没问题了。 - AlienWebguy

我希望支持<thead>和<tr>的功能能够得到更好的支持。具有固定表头或分区标题的滚动表格似乎是一个常见的使用情况。 - kendsnyder

支持thead元素的粘性定位曾经是有效的（而且效果非常好）。我注意到在Chrome 23的某个小版本/补丁发布之后，它失效了，于是我向Chromium开发人员之一报告了这个问题。为什么他们撤销了支持，超出了我的理解范围，因为它之前运行得非常完美。 - Aquarelle

此标志现在为“启用实验性网络平台功能。” chrome://flags/#enable-experimental-web-platform-features。 - Douglas

@TaylorMac 感谢更新。 然而，我在Chrome v.35上再次测试了一下，它没有起作用（至少对于thead元素不起作用）。 另外，caniuse.com表示，在可预见的未来，此属性的支持将不会出现在Chrome中。 所以，我不确定该说什么。 根据我所读到的，三星的一些人已经接管了Chrome中的实现，并且他们还没有准备好（我通过Chromium bug跟踪器收到有关此特定问题的电子邮件更新，这就是我知道的）。 不过，我不明白的是，为什么支持被撤销时，它以前运行得非常好。 - Aquarelle

Answer 3

FilamentGroup发布了一个很好的支持position: sticky的polyfill。请查看：https://github.com/filamentgroup/fixed-sticky

- RWAM

Answer 4

如果有一个父节点设置了overflow: hidden属性，似乎在iOS7 Safari上无法正常工作。

- user1414673

---

你能否添加参考或其他证据？ - class stacker

我确认这是IOS7上的问题，请在移动Safari中加载iFrame src进行测试：http://jsfiddle.net/C4uBE/2/ - TaylorMac

非常好的发现 - 这在Chrome 54和Firefox 51中都是这种情况。 - Neil

它不会停止工作。位置只是相对于具有overflow属性的元素进行计算，而不是相对于视口进行计算。 - bobo

Answer 5

现在它可以实现了 - 至少是现在可以了 请查看 https://caniuse.com/#feat=css-sticky

您正针对 <thead> 进行目标设置，而 Chrome 和 Blink 引擎（Chrome、Edge、Opera）不支持此设置。Gecko（Mozilla Firefox）和 Webkit（Safari）支持此设置。建议改为将目标设置为 <th>，如下所示。

此外，父元素上的 overflow: hidden 将破坏 position:sticky。

确保包括厂商前缀。

运行代码片段，即可显示一个功能完整的固定页眉。

thead > tr > th {
    background: white;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 10px;
}

<h1>Position sticky</h1>
<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

- hoima

Answer 6

当Chrome在版本28中切换到Blink渲染引擎时，他们放弃了Webkit，这是唯一支持此选项的引擎（在Mac和iOS上）。

因此，除非您在Mac或iOS上使用Safari，或者现在在iOS上使用Chrome，否则您将无法在其他浏览器中支持此功能。

很遗憾，这是一个很好且容易的浮动元素方式。

- Bice

---

确实，这是一种很好的浮动元素的方法，特别是在需要保持thead固定并滚动tbody的表格中。我想知道Chrome是否会重新引入它，但现在我们仍然需要使用“临时解决方案”:/ - Kyle

Answer 7

这个好消息是，从Chrome 56开始（截至2016年12月目前为止仍处于beta版本，2017年1月将稳定发布），position: sticky在Chrome中已经回归。
因此，在不久的将来，除了移动设备的浏览器外，只有Edge仍然没有实现它，但我希望他们也能尽快实现它。

- Taras Yaremkiv

---

@Tricksfortheweb Chrome for Android 目前也支持它 - Taras Yaremkiv