画面スクロール時に任意の場所で固定する「position: sticky;」
いろいろなWebサイトを見ていると、スクロールした時に流れていた要素が画面の最上部で固定されるようなサイトを目にしたことがあるかと思います。
このような動きは、Js/jQueryを使って実装することもできますが、シンプルなHTML構造であればCSSの「position: sticky;」を使うことで、Js/jQueryを使うことなく実装することができます。
ただし、複雑なサイト構造（グループ構造）だったり、固定されてからの処理（拡大・縮小など）を行う場合は、Js/jQueryを使った方が良い場合もあります。
「position: sticky;」とは？
「position: sticky;」とは、スクロールした時に、指定した位置まで来たときに、画面外へ流れないように固定するスタイルです。
HTML
<!-- stickyで固定 -->
<div class="sticky-container">
<h2 class="sticky">見出し２</h2>
<p>テキストテキスト～
～
～
</p>
</div>
<!-- stickyで固定ここまで -->
<!-- stickyで固定 -->
<div class="sticky-container">
<h2 class="sticky">見出し２</h2>
<p>テキストテキスト～
～
～
</p>
</div>
<!-- stickyで固定ここまで -->
CSS
.sticky {
position: sticky;
top: 0px; /* stickyで固定する位置を決める */
}
下の図は「position: sticky; top:0;」に設定した場合の様子です。
画面をスクロールしていき、「.sticky」の要素が画面の最上部まできた時に固定されます。
（また元あった位置まで戻ってくると、この固定が解除されます）
「position: sticky;」を扱う時の注意点
ただし、どんな時でも最上部に固定されるわけではなく、この「position: sticky;」が適用された子要素が固定されるのは「直接の親要素のエリア内（高さ）だけ」となり、それを過ぎると画面外に流れていきます。
その基準となる親要素のことを「スティッキーコンテナ」と呼ばれています。
※ここではクラス名にわかりやすく「sticky-container」としています。）
動きを図にすると、このような感じです。
また、もっと長い距離で固定したい場合は、.sticky-containerがより広い領域になるようにHTMLのグループ化を考える必要がありますが、サイト構造によってはスティッキーコンテナのエリアが確保できずに全く固定できなかったり、固定されてもすぐに流れていってしまう可能性があります。
複雑なHTML構造になっている場合は、Js/jQueryを使って「position:fixed;」を切り替えられるようにするのもひとつの方法として有効でしょう。
実際のposition: sticky;は、こちらのデモページにて確認することができます。
- H2の見出しが画面上まで来たら追従
- サイドバーの1部が画面上まで来たら追従
