*

ウェッブ制作

Width =px

ホーム > 変化を付ける小技 >
CSSでサイドメニュー固定 MENU 

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

同じことを当サイトでは、jQuelyでも掲載していますが、CSSの対応を推奨。posion:sticky;の紹介です。

当サイトでは、jQuery を利用して固定化していましたが、このCSSの適用で全ページが一発で見事に変換出来ました。このsticky凄いです。但し、Internet Explorer11、Edgeでは、動作しません。

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

1.HTML(構造)

  • 連番
  • 説明
  • 1
  • サイドメニューの固定の有効範囲は、親 #box2_all の中だけです。
  • 2
  • ボックス名に id を使っていますが、class名でも問題ありません。同一ページで複数利用の場合は、classを使って下さい。

2.CSS

  • 行番
  • 説明
  • 2
  • サイドメニューと記事を、高さを揃えた flex ボックスにすれば、この高さ指定は不要のようです。
  • 4
  • 位置指定では、left right bottom も使えます。

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

  • 連番
  • 説明
  • 1
  • サイドメニューと記事は、同一の親ボックス内で同一階層ですか
  • 2
  • サイドメニューと記事は、同じ高さですか
  • 3
  • overflow:hidden;が親及び上位要素にありませんか、これがあると動作しません。