Q&A
前提・実現したいこと
ハンバーガーメニュー開閉時にスクロールしていた位置を保持したままにしたい。
発生している問題・エラーメッセージ
jqueryでハンバーガーメニューを実装しています。
開いた時にハンバーガーメニューにposition:fixed;が当たるので、
bodyにもposition:fixed;をあてスクロール位置を保持しています。
そして閉じた時にもスクロール位置を保持できるよう実装しているつもりなのですが、topまで戻ってしまいます。
どこが間違っているのかご教授いただけますでしょうか。よろしくお願いいたします。
該当のソースコード
jquery
1$(function(){ 2 var current_scrollY; 3 $('.menu-trigger').on('click', function() { 4 $(this).toggleClass('active'); //ハンバーガーメニュートリガーを[=]マークから[×]に変える 5 if ($(this).hasClass('active')) { 6 current_scrollY = $( window ).scrollTop(); 7 $('.globalMenuSp').addClass('active'); //ハンバーガーメニューを表示させる 8 $( 'body' ).css( { //スクロール位置を保持した状態にする 9 position: 'fixed', 10 width: '100%', 11 top: -1 * current_scrollY 12 } ); 13 } else { 14 $('.globalMenuSp').removeClass('active'); 15 $( 'body' ).attr( { style: '' } ); //bodyに当てたcssを外す 16 $("html,body").scrollTop(current_scrollY); //スクロール位置を保持した状態にしたいがここでtopに戻ってしまう 17 } 18 }); 19}); 20
HTML
1<body> 2 <header id="the-nav"> 3 <section id="nav_n_top_log"> 4 <div class="container-fluid"> 5 <div class="row"> 6 <div class="col-3"> 7 <a href="#"> 8 <img src="logo.svg" class="img-fluid"> 9 </a> 10 </div> 11 <div class="col-9"> 12 <div class="row"> 13 <div class="col-4 ml-auto"> 14 <a class="menu-trigger"> 15 <span></span> 16 <span></span> 17 </a> 18 </div> 19 <div class="col-12 stick-under-line"> 20 <span>uncomfortable</span> 21 </div> 22 </div> 23 </div> 24 </div> 25 </div> 26 </section> 27 </header> 28 <nav class="globalMenuSp"> 29 <ul> 30 <li><a href="#">Menu1</a></li> 31 <li><a href="#">Menu2</a></li> 32 <li><a href="#">Menu3</a></li> 33 <li><a href="#">Menu4</a></li> 34 <li><a href="#">Menu5</a></li> 35 </ul> 36 </nav> 37 38<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 39<script src="js/jquery-3.2.1.min.js"></script> 40 41<!-- Include all compiled plugins (below), or include individual files as needed --> 42<script src="js/popper.min.js"></script> 43<script src="js/bootstrap-4.0.0.js"></script> 44<!--vivus js--> 45<!-- <script src="js/vivus.min.js"></script> --> 46<!--slick js--> 47<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 48<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 49<script type="text/javascript" src="slick/slick.min.js"></script> 50 51<script> 52$(function(){ 53 var current_scrollY; 54 $('.menu-trigger').on('click', function() { 55 $(this).toggleClass('active'); 56 current_scrollY = $( window ).scrollTop(); 57 if ($(this).hasClass('active')) { 58 $('.globalMenuSp').addClass('active'); 59 $( 'body' ).css( { 60 position: 'fixed', 61 width: '100%', 62 //top位置をその時点のスクロール量分だけ上にずらす 63 top: -1 * current_scrollY 64 } ); 65 // return false; 66 } else { 67 $('.globalMenuSp').removeClass('active'); 68 $( 'body' ).attr( { style: '' } ); 69 $("html,body").scrollTop(current_scrollY); 70 } 71 72 }); 73}); 74 75 76 77new Vivus('unconfortable_logo', {type: 'scenario-sync',duration: 20, forceRender: false ,animTimingFunction:Vivus.EASE}) 78</script> 79</body>
css
1 2/*ハンバーガー用トリガーを含むヘッダーnav（ロゴとトリガー）*/ 3#the-nav{ 4 padding-top: 15px; 5 position:fixed; 6 z-index: 3; 7 top:0vh; 8 width: 100%; 9} 10 11/*ハンバーガー用トリガー*/ 12.menu-trigger, 13.menu-trigger span { 14 display: inline-block; 15 transition: all .4s; 16 box-sizing: border-box; 17} 18.menu-trigger { 19 position: relative; 20 height: 30px; 21 width: 30px; 22 left: 30%; 23 z-index: 12; 24} 25.menu-trigger span { 26 position: absolute; 27 height: 1px; 28 background-color: #000000; 29} 30.menu-trigger span:nth-of-type(1) { 31 top: 15px; 32 width: 100%; 33} 34.menu-trigger span:nth-of-type(2) { 35 top: 25px; 36 width: 100%; 37} 38 39.menu-trigger.active span:nth-of-type(1) { 40 position: absolute; 41 -webkit-transform: translateY(5px) rotate(-45deg); 42 transform: translateY(5px) rotate(-45deg); 43} 44 45.menu-trigger.active span:nth-of-type(2) { 46 position: absolute; 47 -webkit-transform: translateY(-5px) rotate(45deg); 48 transform: translateY(-5px) rotate(45deg); 49 50} 51 52.stick-under-line span{ 53 border-bottom: 1px solid #000; 54 display: block; 55 height: 27px; 56 text-align: right; 57} 58 59/*ハンバーガーメニュー*/ 60nav.globalMenuSp { 61 position: fixed; 62 z-index: 2; 63 top: 0; 64 left: 0; 65 background: #fff; 66 color: #000; 67 text-align: center; 68 transform: translateY(-100vh); 69 transition: all 0.6s; 70 width: 100%; 71 -webkit-overflow-scrolling:touch; 72} 73 74nav.globalMenuSp ul { 75 background: brown; 76 margin: 0 auto; 77 padding: 100px 80px; 78 width: 100%; 79 height: 100vh; 80} 81 82nav.globalMenuSp ul li { 83 font-size: 1.1em; 84 list-style-type: none; 85 padding: 0; 86 width: 100%; 87 border-bottom: 1px dotted #333; 88} 89 90nav.globalMenuSp ul li:last-child { 91 padding-bottom: 0; 92 border-bottom: none; 93} 94 95nav.globalMenuSp ul li a { 96 display: block; 97 color: #000; 98 padding: 1em 0; 99} 100 101/* activeを当てて表示させる */ 102nav.globalMenuSp.active { 103 transform: translateY(0vh); 104} 105
試したこと
chromeで検証したところ$("html,body").scrollTop(current_scrollY); の位置でtopまで戻ってしまいます。きちんとスクロール量が取れていないようなので須賀、なぜ取れないのかがわかりません。
補足情報（FW/ツールのバージョンなど）
bootstrapとvivus.min.jsを使用しています。
回答1件
0
js
1 current_scrollY = $( window ).scrollTop(); 2 if ($(this).hasClass('active')) {
↑を↓に変更するとどうなりますか？
js
1 if ($(this).hasClass('active')) { 2 current_scrollY = $( window ).scrollTop();
投稿2019/07/06 10:35
総合スコア36057
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/06 15:29
2019/07/08 00:18
2019/07/09 14:42 編集