スマホ用にハンバーガーメニューを設置しています。
ハンバーガーをクリックすると、スマホ用のナビゲーションが開くようにしていて、
スマホ用のナビゲーションが開いている時は、
背景はスクロールできないようにしたいです。
ただし、ナビゲーションの中身はスクロールさせたいです。
スマホが縦向きの場合はナビゲーションの中身が画面内に収まるので問題ないのですが、
横向きにした場合、ナビゲーションの中身が画面内に収まりきらず、
はみ出した分が見切れてしまい、スクロールもできません。
HTMLはこんな感じです。
(実際には.sp-navの中身は検索フォームなども入れていて複雑です)
<div class="menu"> <a href="" class="trigger">MENU</a> </div> <div class="sp-nav"> <ul class="sp-menu-cat row"> <li><a href="">スマホナビ</a></li> <li><a href="">スマホナビ</a></li> <li><a href="">スマホナビ</a></li> </ul> </div>
jQueryは下記のようにしています。
$('.trigger').click(function(){ $('.sp-nav').stop(true, true).fadeToggle(); $(this).toggleClass('open'); if($(this).hasClass('open')){ var navHeight = $('.sp-nav').innerHeight(); $('body').css({'overflow':'hidden','height':navHeight+82}); } else { $('body').css({'overflow':'auto','height':'auto'}); } return false; });
.sp-navの高さを取得して、bodyの高さに追加することで、
ナビゲーションメニューの高さ分はスクロールできると思ったのですが、
スマホを横向きにした時にナビゲーションの途中で切れてしまって
スクロールができません。
.sp-navのCSSに「overflow-y:scroll;」も入れたのですが、
特に変化はありませんでした。
背景はスクロールさせずに、ナビゲーションの中身だけを
スクロールさせる方法はありますでしょうか?
ご教示いただけると幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。