前提・実現したいこと
スマホ向けサイトで、モーダルウィンドウを使ったメニュー表示を作っています。
メニューボタン自体は__position:fixed__でウィンドウ上端に固定してあります。
ページをスクロールした状態で
1.メニューを開いた時
2.メニューを閉じた時
にそれぞれ表示中の背景部分を維持する予定です。
発生している問題・エラーメッセージ
メニューを開いた際の固定は__$(window).scrolltop()__から取得した値と__position:fixed__でうまく行っているのですが、
メニューを閉じる際にページ最上部に移動してしまいます。
以下、Chromeのデベロッパーツールで確認したエラーとなります。
ReferenceError: scrollTop is not defined at eval (eval at <anonymous> (http://○○○/:16:5), <anonymous>:1:1) at HTMLAnchorElement.<anonymous> (http://○○○/:264:5) at HTMLAnchorElement.dispatch (http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:12444) at HTMLAnchorElement.r.handle (http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:9173) message:"scrollTop is not defined" stack:"ReferenceError: scrollTop is not defined at eval (eval at <anonymous> (http://○○○/:16:5), <anonymous>:1:1) at HTMLAnchorElement.<anonymous> (http://○○○/:264:5) at HTMLAnchorElement.dispatch (http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:12444) at HTMLAnchorElement.r.handle (http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4:3:9173)" __proto__:Error
該当のソースコード
html
1<script type='text/javascript' src='http://○○○/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> 2<script type='text/javascript' src='http://○○○/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script> 3~ 4~ 5<script type="text/javascript"> 6 jQuery(document).ready(function ($) { 7 var current_scrollY; 8 var scroll2; 9 var switch_menu = false; 10 $('#menuButton').on('click', function () { 11 current_scrollY = $(window).scrollTop(); 12 $('#menuButton').toggleClass('Closed Open'); 13 $('#menuContainer').toggleClass('Closed Open'); 14 $('#container').toggleClass('Close Open') 15 16 if (switch_menu) { 17 $('#container').removeAttr('style'); 18 ① $('body').prop({scrollTop: scroll2}); 19 ② switch_menu = false; 20 } else { 21 scroll2 = $(window).scrollTop(); 22 $('#container').css({ 23 position: 'fixed', 24 width: '100%', 25 top: -1 * current_scrollY, 26 }); 27 switch_menu = true; 28 } 29 ③ }); 30 }); 31</script>
試したこと
ソース①__$('body').prop({scrollTop: scroll2});__ を
①' $(window).scrollTop(scroll2);
と変更した所、②、③に設置したブレークポイントでは見た目上想定位置に移動しているようなのですが、最終的にページ上部に移動しています。
補足情報(FW/ツールのバージョンなど)
WordPress 4.9.4
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/14 02:06