43

你如何开始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 中不起作用。

4

7 回答 7

51

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

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


--enable-experimental-webkit-features从 Chrome 52.0.2743.116 开始,该功能再次由标志启用。


要回答关于为什么它被删除的更新问题:由于规范的未完成性质,谷歌(Chromium)删除了对的支持position: sticky,同时他们将专注于其他滚动功能:

“我们最终希望实现 position:sticky,但当前的实现并没有以与现有滚动和合成系统很好集成的方式设计。例如,position:sticky 依赖于 updateLayerPositionsAfterDocumentScroll 才能正常运行,但该功能已经没有其他用途,可以通过其他方式移除。类似地,position:sticky 对复合溢出滚动根本不起作用,它现在是引擎中驱动滚动的默认机制。

一旦我们的滚动和合成房子井井有条,我们应该回到位置:粘性并以与引擎其余部分很好集成的方式实现该功能。然而,目前,这个 CL 删除了我们当前的实现,因此我们可以专注于改进我们已经发布的滚动功能的实现。”

强调我的。你可以在这里阅读更多关于它的信息。

于 2014-10-06T18:15:46.093 回答
34

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

更新:这在 Chrome v35 到 v51 上不起作用,Chrome 52 使用实验性 Web 平台功能标志重新启用此功能。从 Chrome 56 开始,position: sticky开箱即用。

于 2013-03-26T20:30:57.727 回答
12

FilamentGroup 为position: sticky. 看看:https ://github.com/filamentgroup/fixed-sticky

于 2013-10-09T08:32:41.753 回答
8

overflow: hidden如果有一个设置了属性的父节点,它似乎在 iOS7 Safari 上不起作用。

于 2013-11-28T15:21:05.023 回答
3

When Chrome switched over to the Blink rendering engine with version 28, they dropped Webkit, which is the only engine to support this (on Mac and iOS.)

So unless you're using Safari on Mac or iOS, or Chrome on iOS (for now) you will not be able to support this in other browsers.

Sad, it's a great and easy way to float elements.

于 2014-03-14T21:33:21.603 回答
3

它确实 - 现在至少查找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>

于 2019-09-13T07:15:51.127 回答
1

好消息是,从Chrome 56(目前为 2016 年 12 月的测试版,2017 年 1 月稳定)开始:粘性现在又回到了 Chrome 中。
因此,在不久的将来,除了用于移动设备的浏览器之外,所有浏览器中只有 Edge 将成为唯一一个尚未实现它的浏览器,但我希望他们也能尽快实现它。

于 2016-12-20T08:51:37.483 回答