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的支持，他们将专注于其他滚动功能在平均时间：

＆＃34;我们最终希望实施职位：粘性，但当前   实施的设计并不是与现有的完美整合   滚动和合成系统。例如，position：sticky依赖于   updateLayerPositionsAfterDocumentScroll正常运行，但是   功能没有其他目的，否则可以删除。同样的，   position：sticky并不适用于合成溢出滚动，这是   现在是驱动引擎滚动的默认机制。

一旦我们按顺序完成了滚动和合成的房子，我们就应该回来了   定位：粘性和以一种集成良好的方式实现该功能   与引擎的其余部分。但是现在，这个CL删除了我们的当前   实现所以我们可以专注于改进我们的滚动实现   我们已经发布的功能。＆＃34;

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

Answer 2

编辑：您需要通过--enable-experimental-webkit-features启用about:flags标记启动。

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

Answer 3

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

Answer 4

如果存在设置了overflow: hidden属性的父节点，它似乎无法在iOS7 Safari上运行。

Answer 5

当Chrome切换到版本为28的Blink渲染引擎时，他们删除了Webkit，这是唯一支持此功能的引擎（在Mac和iOS上）。

因此，除非您在Mac或iOS上使用Safari，或在iOS上使用Chrome（目前），否则您将无法在其他浏览器中使用此功能。

很遗憾，这是浮动元素的一种简单方法。

Answer 6

great news是从Chrome 56开始（截至2016年12月为测试版，2017年1月稳定）位置：粘性现已回到Chrome中。
因此，在不久的将来，除了移动设备的浏览器之外，只有Edge将是所有尚未实现它的浏览器中的唯一一个，但我希望他们也能很快实现它。

Answer 7

确实如此-至少现在查找https://caniuse.com/#feat=css-sticky

您以<thead>为目标，而Chrome和Blink引擎（Chrome，Edge，Opera）不支持此功能。 Gecko（Mozilla Firefox）和Webkit（Safari）可以。而是尝试将<th>定位为目标，如下所示。

父项上的overflow: hidden也会中断position:sticky

请确保包括您的vendor prefixes。

运行该代码段，它应该显示一个实用的粘性标头。

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>

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

7 个答案: