CSS WEB制作

【CSS】スライドメニューを表示させたままスクロール&ヘッダー固定

slide_menu-header_fix

CSSでヘッダーを固定したのに、スライドメニューを表示したまま下へスクロールするとヘッダーがついてこない。

というエラーでつまづいたのでメモ代わりに記事として残します。

 

エラー内容

まずはヘッダーを作成します。

デザインはよくあるパターンで、右端にハンバーガーメニューを置きます。

header

 

ハンバーガーメニューをクリックすると、ブラウザの右外側からスライドメニューが表示されます。

slide-menu-open

 

 

ここまでは順調です。

 

ポイント

この時点で、ヘッダーには

position:fixed;

を指定しております。

 

さて、このスライドメニューを表示したまま下にスクロールします。

 

header-down

 

ご覧のとおり、ヘッダーが固定されておらず、下にスクロールしてもヘッダーがついてきません

ちなみに、スライドメニューが非表示ならヘッダーは固定されてスクロールしてもちゃんとついてくるんです。

 

原因はまだ調査中ですが、おそらくスライドメニューの動作とヘッダーが干渉し合っているのではないかと思います。

 

解決コード

1点CSSを変更します。

position:fixed; を  position: sticky; に変更します。

 

header-down2

 

今度はうまくいきました。
スライドメニューを表示したままスクロールしてもヘッダーが固定されており、ちゃんとついてきました。

 

まとめ

いかがでしたでしょうか。

 

ヘッダーに対して position: sticky; を設定するだけです。

 

同じ現象で困っている方は是非この方法で試してみてください。

 

 

独学で悩んでいる方はこちらもどうぞ。

-CSS, WEB制作
-, ,

© 2024 人生フリーハンド Powered by AFFINGER5