スティッキーサイドバー 2 カラム
本文の横に置いた目次やナビゲーションを、スクロールしても画面内に追従させる2カラムレイアウトです。仕組みは display:grid で本文とサイドバーを横並びにし、サイドバー側に position:sticky と top 値を指定するだけ。
解説
本文の横に置いた目次やナビゲーションを、スクロールしても画面内に追従させる2カラムレイアウトです。仕組みは display:grid で本文とサイドバーを横並びにし、サイドバー側に position:sticky と top 値を指定するだけ。JavaScript は使っていないため軽く、読み込み直後から安定して動きます。
長文の記事ページ、製品の仕様書、ドキュメントサイトなど、読者が現在地を見失いやすい縦長ページで効果を発揮します。サイド側にページ内リンクの目次を入れれば、スクロール中もずっと項目に手が届く状態を保てます。
調整と注意点
top値は固定ヘッダーの高さに合わせて広げ、サイドバーがヘッダーに隠れないようにします。- 親要素に
align-items:startを付けないと、追従が効かず一緒に伸びてしまう点に注意します。 - 画面幅が狭い端末では2カラムが窮屈になるため、
grid-template-columnsを1列へ切り替えて縦積みにすると読みやすくなります。 - 列幅やすき間は
grid-template-columnsとgapの数値で自由に変えられます。
よくある質問
JavaScript は必要ですか。
不要です。追従はCSSのposition:stickyだけで実現しているため、スクリプトを読み込まなくても動作します。
サイドバーが追従しないのですが。
多くは親要素のalign-itemsがstretchのままで、サイドバーが本文と同じ高さに引き伸ばされていることが原因です。親にalign-items:startを指定し、top値も設定されているか確認してください。