*

ウェッブ制作

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

ページをスクロールするとサイドメニューも一緒に上に消えるのをCSSで固定する方法です。決め手は、 CSS3から使えるようになったposion:sticky;です。 同じことを当サイトでは、jQuelyでも掲載していますが、CSSでのこの対応をお薦めします。

当サイトでは、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;が親及び上位要素にありませんか、これがあると動作しません。