【Bootstrap】ヘッダーを固定した時でもメガメニューをスクロールさせる【メガメニュー】
公開日:2021年3月31日
2021年9月27日 更新
ヘッダーを固定するとスクロール・スワイプ出来ない
上記サイト内の「Navbar with megamenu」を使用。
Bootstrap4.5で、ヘッダーを固定してメガメニューを作ると、縦長になった時・特にスマートフォンの時など、スクロール・スワイプ出来ない。
メニューの数が少ないならまだしも、そこそこの数になるとメニューとしての機能が微妙。
そんな時の備忘録。
overflowとbottom指定を振る
https://chaika.hatenablog.com/entry/2017/11/21/090000
CSS Fixedしたコンテンツでスクロールさせたい - かもメモ
上記のサイトが参考になった。
自分の場合は、ハンバーガーメニューをクリックした時にBootstrapでfixed-topを指定している要素に新しいクラス名を付与する。
$('ハンバーガーメニューのクリック出来る要素').click(function(){
$('ポジション固定している要素').toggleClass("新しく付与するクラス名");
});
そして別途cssを記述しておく。
新しく付与したクラス名 {
bottom:0;
overflow-y:auto;
}
を指定してOK。
自分は固定部分をスクロールする高さで表示非表示を切り替えていたので、必要ならtop:0;も足した方が良いかも。
スクロールバーが気になる時
スマートフォンだと気にならないかもしれないけど、上記指定をするとスクロールバーが2つ出てきて気になるかもしれない。
そういう場合は
新しく付与したクラス名 { /* Firefox */
scrollbar-width:none;
}
新しく付与したクラス名::-webkit-scrollbar { /* Chrome, Safari */
display: none;
}
を指定する。