スクロールでサイドメニューも消えるのをCSSで固定
同じことを当サイトでは、jQuelyでも掲載していますが、CSSの対応を推奨。posion:sticky;の紹介です。
当サイトでは、jQuery を利用して固定化していましたが、このCSSの適用で全ページが一発で見事に変換出来ました。サイドメニューに拘らず、固定したい列に指定するだけです。
このsticky凄いです。但し、Internet Explorer11は未確認で、Edge V.1903では動作確認済みです。
以下の説明は、当サイトを事例として説明しています。
1.HTML(構造)
1 2 3 4 5 6 7 8 |
<div id="box2_all"> <div id="side_menu_box"> <!-- id 内のメニューの中身 --> </div> <div id="box2_content"> <!-- 右側のコンテンツ(記事) --> </div> </div> |
- 連番
- 説明
- 1
- サイドメニューの固定の有効範囲は、親 #box2_all の中だけです。
- 2
- ボックス名に id を使っていますが、class名でも問題ありません。同一ページで複数利用の場合は、classを使って下さい。
2.CSS
1 2 3 4 5 |
#side_menu_box { height:100%; /* サイドメニューの高さを記事と同じ高さにする */ position: sticky; /* これが決め手 */ top: 10px; /* 画面の上から10pxの位置に固定 */ } |
- 行番
- 説明
- 2
- サイドメニューと記事を、高さを揃えた flex ボックスにすれば、この高さ指定は不要のようです。
- 4
- 位置指定では、left right bottom も使えます。
固定できない時の確認事項
- 連番
- 説明
- 1
- サイドメニューと記事は、同一の親ボックス内で同一階層ですか
- 2
- サイドメニューと記事は、同じ高さですか
- 3
- overflow:hidden;が親及び上位要素にありませんか、これがあると動作しません。