スクロールでサイドメニューも消えるのをＣＳＳで固定

2018-9-21

同じことを当サイトでは、jQuelyでも掲載していますが、ＣＳＳの対応を推奨。ｐｏｓｉｏｎ：ｓｔｉｃｋｙ；の紹介です。

当サイトでは、jQuery　を利用して固定化していましたが、このＣＳＳの適用で全ページが一発で見事に変換出来ました。サイドメニューに拘らず、固定したい列に指定するだけです。

このｓｔｉｃｋｙ凄いです。但し、Internet Explorer11は未確認で、Edge V.1903では動作確認済みです。

以下の説明は、当サイトを事例として説明しています。

１．ＨＴＭＬ（構造）

<div id="box2_all">
	<div id="side_menu_box">
		<!-- id 内のメニューの中身 -->
	</div>
	<div id="box2_content">
		<!-- 右側のコンテンツ（記事） -->
	</div>	
</div>

</div>

</div>

連番
説明

1
サイドメニューの固定の有効範囲は、親 #box2_all の中だけです。

2
ボックス名に id を使っていますが、class名でも問題ありません。同一ページで複数利用の場合は、classを使って下さい。

２．ＣＳＳ

#side_menu_box {
  height:100%;        /* サイドメニューの高さを記事と同じ高さにする */
  position: sticky;   /* これが決め手 */   
  top: 10px;          /* 画面の上から１０ｐｘの位置に固定 */
}

#side_menu_box {

height:100%; /* サイドメニューの高さを記事と同じ高さにする */

position: sticky; /* これが決め手 */

top: 10px; /* 画面の上から１０ｐｘの位置に固定 */

}

行番
説明

2
サイドメニューと記事を、高さを揃えた flex ボックスにすれば、この高さ指定は不要のようです。

4
位置指定では、left right bottom も使えます。

固定できない時の確認事項

連番
説明

1
サイドメニューと記事は、同一の親ボックス内で同一階層ですか

2
サイドメニューと記事は、同じ高さですか

3
overflow:hidden;が親及び上位要素にありませんか、これがあると動作しません。