4 年前、Eric Bidelman 氏は、position: sticky が WebKit に導入されたという素晴らしいブログ投稿を投稿しました。WebKit は、当時 Chrome（および Safari を含む他の多くのブラウザ）を動かすエンジンでした。1 年後、ウェブ デベロッパーの混乱により、Google は「現在の実装が既存のスクロールおよび合成システムとうまく統合するように設計されていない」という理由で Chrome から position:sticky を削除しました。
「スクロールと合成のハウスを順番に取得したら、position:
sticky に戻り、エンジンの他の部分とうまく統合するように機能を実装する必要があります」と述べていたように、Google は常に Chrome にこの機能を戻したいと考えていました。実装を追跡するメタバグは、2013 年から対応されています。
Chrome 56（現在は 2016 年 12 月現在ベータ版で、2017 年 1 月安定版）より、position: sticky が Chrome に組み込まれました。
位置:固定とは
まだ少し時間がかかるのに、どうしてワクワクするのかな？
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（yay）、Firefox、Safari で利用できますposition:sticky の詳細は以下のとおりです。