どうやって手に入れたの 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://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
Chrome 23.0.1247.0でサポートされているように見えましたが、現在は26.0.1410.43 mでは動作しません。
[〜#〜] edit [〜#〜]:--enable-experimental-webkit-features
でabout:flags
フラグを有効にして起動する必要があります。
更新:これは、Chrome v35からv51では機能しません。Chrome 52は、実験的なWebプラットフォーム機能フラグでこれを再度有効にします。 Chrome 56 position: sticky
から開始すると、そのまま使用できます。
短期間、Chromeフラグの後ろでこの機能を有効にした、--enable-experimental-webkit-features
、about:flagsセクション。ただし、ブラウザの再描画方法の非効率性のため、すぐに削除されました。
Chrome 56 以降、この機能はフラグなしで再び有効になります。
Chrome 52.0.2743.116の時点で、この機能はフラグ--enable-experimental-webkit-features
もう一度。
削除された理由に関する更新された質問に答えるために:Google(Chromium)はposition: sticky
仕様の未完成の性質により、当面は他のスクロール機能に焦点を当てます。
「最終的に位置を実装したい:スティッキー、ただし現在の実装は、既存のスクロールおよび合成システムとうまく統合できるように設計されていないたとえば、position:stickyはupdateLayerPositionsAfterDocumentScrollに依存して正しく機能しますが、その関数には他の目的はなく、削除することもできます。エンジンのスクロールを駆動します。
スクロールと合成の家を順番に取得したら、位置に戻る必要があります:スティッキーと残りのエンジンとうまく統合する方法で機能を実装します。ただし、現時点では、このCLは現在の実装を削除しているため、既に出荷したスクロール機能の実装の改善に集中できます。」
強調鉱山。詳細については、こちらをご覧くださいここ。
FilamentGroupは、position: sticky
。ご覧ください: https://github.com/filamentgroup/fixed-sticky
overflow: hidden
プロパティが設定された親ノードがある場合、iOS7 Safariでは動作しないようです。
Chrome=バージョン28のBlinkレンダリングエンジンに切り替えたとき、Webkitはこれをサポートする唯一のエンジンです(MacおよびiOS)。)
そのため、MacまたはiOSでSafariを使用していない場合、またはiOSでChrome(現在))を使用している場合を除き、他のブラウザーでこれをサポートすることはできません。
悲しいことに、それは要素をフロートするための素晴らしい簡単な方法です。
great news は、Chrome 56(2016年12月現在のベータ版、2017年1月に安定)現在、スティッキーはChromeに戻っています。
したがって、近い将来、モバイルデバイス用のブラウザを除き、Edgeのみが、まだ実装されていないすべてのブラウザのうちの1つになりますが、すぐに実装されることを願っています。