ホームページでサブメニュー表示時に背面を固定したいです(iPhone使用時)
ハンバーガーボタンを押すと、画面いっぱいを覆うようにサブメニューが出てくるようにしています。
サブメニューが出るとbodyにoverflow:hiddenがつくようにしているのですが、
iphone(ios端末)ではbodyが固定されませんでした。
iphoneでも固定できる方法をご教授いただければと思います!
追記 9/6
その他にはメニュークリック時にposition:fixedをかけましたが、こちらもページ上部で固定になりました。
javascript
1 2 //iosメニュー表示時モーダル用 3 jQuery(window).on('touchmove', function(event) { 4 event.preventDefault(); 5 }); 6 7 //ハンバーガーボタンのアニメーション処理 8 document.addEventListener('DOMContentLoaded', function () { 9 menuButton.addEventListener('click', function (ev) { 10 ev.preventDefault(); 11 this.classList.toggle('active'); 12 }); 13 }); 14 15 //メニューボタン押下時処理 16 menuWrapper.addEventListener('click', function (event) { 17 //メニューが隠れている場合 18 if (nav.classList.contains('close')){ 19 //メニューを開く 20 nav.classList.remove('close'); 21 nav.classList.add('open'); 22 //背景を固定する 23 body.classList.add('fixed'); 24 //メニュー表示中の場合 25 } else { 26 //メニューを閉じる 27 nav.classList.add('close'); 28 nav.classList.remove('open'); 29 //背景固定を解除 30 body.classList.remove('fixed'); 31 } 32 });