よく見かけるモーダルウインドウ型のナビゲーションを参考サイトを頼りに作成したのですが、
以下の記述だと、スマホで表示した時にメニューにスクロールが必用なデザインの場合、モーダルウインドウはスクロールされずに、下のコンテンツがスクロールされてしまいます。
以下の記述に付き足してスマートフォンでスムーズにスクロールできる方法はありますでしょうか。
<style> #js_btn { position: fixed; top: 20px; right: 20px; z-index: 2; } #js_nav { display: none; position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); } .open #js_nav { display: block; } @media only screen and (max-width: 768px) { #js_nav ul li { margin-bottom: 200px; } } </style> <div id="js_btn"> <a href="#">MENU</a> </div> <div id="js_nav"> <ul> <li><a href="#">CONCEPT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">MEMBER</a> <li><a href="#">ABOUT US</a></li> <li><a href="#">RECRUIT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <script> $(function(){ var $body = $('body'); $('#js_btn').on('click', function () { $body.toggleClass('open'); }); $('#js_nav').on('click', function () { $body.removeClass('open'); }); }); </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/05 07:07
2017/07/11 08:00