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.43mでは機能しなくなりました。

4

7 に答える 7

51

しばらくの間、Chrome--enable-experimental-webkit-featuresはabout:flagsセクションのフラグの背後でこの機能を有効にしました。ただし、ブラウザの再描画方法が非効率的だったため、まもなく削除されました。

Chrome 56以降、この機能はフラグなしで再度有効になります。


Chrome 52.0.2743.116以降、この機能はフラグによって--enable-experimental-webkit-featuresもう一度有効になります。


削除された理由に関する更新された質問に答えるために:Google(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では機能しません。Chrome52は、実験的なウェブプラットフォーム機能フラグを使用してこれを再度有効にします。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プロパティが設定された親ノードがある場合、iOS7Safariでは機能しないようです。

于 2013-11-28T15:21:05.023 に答える
3

Chromeがバージョン28のBlinkレンダリングエンジンに切り替えたとき、これをサポートする唯一のエンジンであるWebkitを削除しました(MacおよびiOS)。

したがって、MacまたはiOSでSafariを使用している場合、またはiOSでChromeを使用している場合(現時点では)を除き、他のブラウザでこれをサポートすることはできません。

悲しいことに、それは要素を浮かせるのに最適で簡単な方法です。

于 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月に安定)の位置で、stickyがChromeに戻ったことです。
したがって、近い将来、モバイルデバイス用のブラウザを除いて、まだ実装されていないブラウザはEdgeだけになりますが、近いうちに実装されることを願っています。

于 2016-12-20T08:51:37.483 に答える