スティッキーサイドバー
本文を読み進めても左のメニューが画面に追従し続ける、2 カラムレイアウトです。全体を display:grid で 200px 1fr の 2 列に分け、サイドバーに position:sticky と top:20px を指定。
解説
本文を読み進めても左のメニューが画面に追従し続ける、2 カラムレイアウトです。全体を display:grid で 200px 1fr の 2 列に分け、サイドバーに position:sticky と top:20px を指定。これだけで、スクロールしてサイドバーが上端から 20px の位置に来ると、そこで貼り付いて一緒に動きます。align-items:start を親に付けているのもポイントで、これが無いとサイドバーが本文の高さに引き伸ばされ、sticky が効かなくなります。JavaScript は一切不要です。
こんな用途に
- 長い解説記事やドキュメントの目次ナビ
- 商品一覧の絞り込みフィルターを常に見える位置に置きたい EC
- 本文を読みながら操作したいフォームやプロフィール欄
追従し始める位置は top の値で調整でき、固定ヘッダーがある場合はその高さ分だけ大きくします。列幅は grid-template-columns の 200px 部分で変更可能です。注意として、親要素に overflow:hidden が掛かっていると sticky は機能しません。狭い画面では 2 列が窮屈になるため、メディアクエリで 1 列に切り替えるか、モバイルではサイドバーを通常配置に戻すと読みやすくなります。
使用例・適したシーン
- 記事ページの目次
- ドキュメントサイトのナビ
- ダッシュボードのメニュー
よくある質問
sticky が効かないのはなぜですか
多くは親要素に overflow:hidden / auto が掛かっている、または親に align-items:stretch でサイドバーが引き伸ばされているのが原因です。このパーツでは親に align-items:start を付けて防いでいます。top の指定漏れも効かない原因になります。
スマホでは縦並びにできますか
できます。メディアクエリで grid-template-columns を 1fr の一列に変え、サイドバーの position を static に戻せば縦並びになります。狭い画面では追従より上部固定や折りたたみの方が読みやすい場合もあります。