4 年前、Eric Bidelman は、position: sticky が WebKit に導入されたことについて、非常に素晴らしいブログ投稿を作成しました。当時、WebKit は Chrome（および Safari を含む他の多くのブラウザ）を動かすエンジンでした。1 年後、ウェブ デベロッパーの懸念をよそに、Google は「現在の実装は、既存のスクロール システムと合成システムと適切に統合されるように設計されていない」という理由で、Chrome から position:sticky を削除しました。
Google は、この機能を Chrome に復元したいと常に考えていました。バグには、「スクロールと合成を整理したら、position:
sticky に戻り、エンジンの他の部分とうまく統合されるようにこの機能を実装する」と記載されています。実装の追跡用メタバグは 2013 年から取り組んでいます。
幸いなことに、Chrome 56（2016 年 12 月現在はベータ版、2017 年 1 月には安定版）で position: sticky が Chrome に復活しました。
position:sticky とは何ですか？
リリースまでには少し時間がかかりましたが、なぜこれほど期待しているのでしょうか。
position:sticky は CSS の配置属性で、要素をビューポートに固定（画面上部に固定）できます。ただし、親がビューポートに表示され、しきい値の値内にある場合に限られます。ビューポートに固定されていない場合、要素は position: relative のように動作します。これは、要素をビューポートの上部にロックするためだけに onscroll イベント ハンドラで JavaScript を使用する必要がなくなる、非常に便利でシンプルな機能です。
私のブログでは次のように表示されます。長くて読みづらい記事を読みながら、現在のセクションのヘッダーを画面上部に表示しておくことができます。
この機能を実装するには、固定する要素の position 属性の値を sticky に指定します。また、貼り付ける必要がある場所にオフセットを追加することもできます。
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
上の例では、<h3> 要素をビューポートの上端から 10 ピクセルに固定します。ビューポートの上部に直接固定するには、top 属性を top: 0px に設定します。
この機能は幅広くサポートされています。Chrome、Firefox、Safari でご利用いただけます。position:sticky の詳細は次のとおりです。