モーダルウィンドウ表示ボタンを押すと、画面の一番上に戻ってしまいます。
スマホ用のサイトを作成しています。
一画面になっている構成(LP)でハンバーガーメニューボタンを押すと、
メニュー画面が開き、背景画面は動かなくなる用に設定しています。
希望はメニュー画面を押した時に見ていた箇所のまま背景固定ですが、
一番上まで戻って固定されます。
現状はjsでメニューボタンを押すと、bodyにposition:fixedがつくようにしています。
どなたか解決法をご教示いただけますと幸いです。
よろしくおねがいいたします。
html
1<div id="menuWrapper"> 2 <a href="#menu" id="menuButton"><span>MENU</span></a> 3</div> 4<img class="logoMark_01" src="image/logoMark_01.png"> 5<nav class="nav close" id="nav"> 6 <ul class="navList"> 7 <li><a id="moveTop" href="#head">Top</a></li> 8 <li><a id="moveAbout" href="#about">About</a></li> 9 <li><a id="moveService" href="#service">Product</a></li> 10 <li><a id="moveContact" href="#contact">Contact</a></li> 11 </ul> 12</nav>
javascript
1 //query,ID,class取得 2 const body = document.querySelector("body"); 3 const menuWrapper = document.getElementById('menuWrapper'); 4 const menuButton = document.getElementById('menuButton'); 5 const nav = document.getElementById('nav'); 6 7 //メニューボタン押下時処理 8 menuWrapper.addEventListener('click', () => { 9 //メニューが隠れている場合 10 if (nav.classList.contains('close')){ 11 nav.classList.remove('close');//メニューを開く 12 body.classList.add('fixed');//背景を固定する 13 //メニュー表示中の場合 14 } else { 15 nav.classList.add('close');//メニューを閉じる 16 body.classList.remove('fixed');//背景固定を解除 17 } 18 }); 19
css
1.fixed { 2 position: fixed; 3} 4.close { 5 display: none; 6}
回答1件
あなたの回答
tips
プレビュー