【CSSたった2行】スクロールに追従するサイドバーを作る「position: sticky」

ブログの長文記事を読んでいる時、サイドバーにある「目次」や「バナー広告」が画面外に消えてしまって、もったいないと思ったことはありませんか？

これらを画面のスクロールに合わせてピタッと追従（固定）させると、読者がいつでも他の記事にアクセスできるようになり、サイトの回遊率やクリック率が劇的にアップします。

一昔前は、JavaScript（jQuery）を使ってスクロール量を計算し、position: fixed に切り替える…という面倒な実装が必要でしたが、今はCSSをたった2行書くだけで超カンタンに実現できます！

魔法のCSS「position: sticky」

追従させたい要素（サイドバーのウィジェットなど）に、以下のCSSを追加するだけで実装完了です。

.kz-sticky-item {
    position: sticky; /* スクロール追従の魔法 */
    top: 20px; /* 画面の上から20pxの位置で止まる */
}

たったこれだけです！
position: sticky; は、「普段は普通にスクロールされるけれど、画面の上から指定した位置（top: 20px）に到達したら、そこから下はピタッとくっついて離れない」という、まさに固定メニューのために生まれたようなプロパティです。

【要注意】「stickyが効かない！」という時の解決法

この position: sticky は非常に便利なのですが、Web制作の実務において「コードは合っているのに、なぜか追従してくれない（止まらない）！」というトラブルが頻発します。

もし効かない場合は、以下の2つの原因を疑ってください。

原因1：親要素に「overflow: hidden」がかかっている

これが最も多い原因です。追従させたい要素の「親」や「先祖」にあたるタグ（例えば <div class="wrap"> や <body> など）に、overflow: hidden や overflow: clip が指定されていると、stickyは強制的に無効化されてしまいます。親要素のCSSを確認して外しましょう。

原因2：親要素の「高さ」が足りない

stickyは、「親要素の高さの範囲内」でしか追従しません。
例えば、サイドバーとメイン記事エリアの高さが全く同じ場合、追従するための「余白のレール」がないため、動くことができません。サイドバーよりメイン記事の方が長くなるようにレイアウト（Flexboxなど）を調整する必要があります。

まとめ：CSSだけでリッチなUIを作ろう

「アコーディオン」や「スムーススクロール」、そして今回の「追従サイドバー」。
昔はJavaScriptの独壇場だったリッチな動きが、今はどんどんCSSだけで、しかも数行で実装できるようになっています。

サイトの表示速度を落とさずにユーザビリティを向上させることができるので、ぜひブログのサイドバーに position: sticky を取り入れてみてくださいね！