長いこと Blog の更新をサボっていたため、ちょっと無理矢理書いている感もありますが、タイトルの通り、米国時間の 2017年 1月 25日付けで正式リリースされた Chrome 56 が CSS position: sticky;
に対応しました。
position: sticky;
を指定することで、例えば画面からスクロールアウトする際に、そのまま画面上部に固定されてスクロールに追随してくるような要素の配置が CSS のみで実現可能です。
position: sticky;
に関する詳しい説明は、もう 4年くらい前の古い記事にはなりますが下記の記事で解説していますので参考まで (ベンダプレフィックスの話などは古いので無視していただければ)。
実は上記の記事を書いている時点では、Chrome も一度 position: sticky;
を実装していたんですよね。ところが実装面でちょっと問題があって、一旦削除されてしまっていました。ですので、ここに来て復活ということになります。
Edge、および IE11 が未対応なため、使えるシーンは限られていますが、固定ヘッダなどを CSS のみで実現できるため、非常に簡単に実装ができるメリットがあります。
参考リンク
- position - CSS : MDN
- 6.5. Choosing a positioning scheme: position property : CSS Positioned Layout Module Level 3