スマホでグローバルメニューの背景をスクロールしないようにしたいです

前提・実現したいこと

グローバルメニューの作成でハマッていましたが、
以下の方法で一旦応急的に解決しています。

やりたいことは、
グローバルメニューを開いた位置で背景が固定され、グローバルメニューを閉じてもそのままの位置をキープする
というグローバルメニューです。

発生している問題・コード

先ほど、問題となっているコード等を書きましたが、一旦下記方法にて応急的に問題なく動いています。

touch closeエリアとメニューボタンを押しても背景を固定することができました。

ただ、処置としては右上のバーガーメニューの上に透明の別の要素を被せてそこをクリックするという方法になります。

以下、コードになります。

<script>
$(function(){
  $('#gnavi .menu').hide();
  
  $('#gnavi .btn').click(function(){
    $('#gnavi').toggleClass('active');
    $('#gnavi .menu, #gnavi .closer').fadeToggle();
    posi = $(window).scrollTop();
    $('body').css({
       position: 'fixed',
       top: -1 * posi
    });
  });

  $('#gnavi .closer, #gnavi .close-btn').click(function(){
    $('#gnavi').toggleClass('active');
    $('body').attr('style', '');
    $('html, body').prop({scrollTop: posi});
    $('#gnavi .menu, #gnavi .closer').fadeToggle();
  });
});
</script>
<style>
/*

  -- Global Navigation --

*/


#gnavi {
  position: relative;
  z-index: 50;
}


/* botton-position */

#gnavi .area {
  position: fixed;
  top: 24px;
  right: 8px;
  z-index: 30;
}


/* botton-design */

#gnavi .btn,
#gnavi .close-btn {
  display: none;
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #f0f0f0;
  background: rgba(255,255,255,.8);
  cursor: pointer;
  z-index: 40;
}
#gnavi .close-btn {
  position: absolute;
  top: 0;
  left: 0;
  height: 72px;
  border-radius: 0;
  border: 0;
  background: none;
}
@media (max-width: 800px) {
#gnavi .btn {
  display: block;
}
}

#gnavi .bar {
  position: relative;
  width: 32px;
  margin: 15px auto;
}
#gnavi .bar span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #333333;
  -webkit-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#gnavi .bar span:nth-child(1) {
  top: 0;
}
#gnavi .bar span:nth-child(2) {
  top: 10px;
}
#gnavi .bar span:nth-child(3) {
  top: 20px;
}

#gnavi small {
  position: absolute;
  bottom: -20px;
  right: 0;
  width: 56px;
  font-size: 12px;
}


/* botton-animation */

#gnavi.active .close-btn {
  display: block;
}

#gnavi.active .bar span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
}
#gnavi.active .bar span:nth-child(2) {
  width: 0;
  left: 50%;
}
#gnavi.active .bar span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
}


/* gnavi-closer */

#gnavi .closer {
  display: none;
  position: fixed;
  bottom:0;
  left: 0;
  width: 100%;
  height: 15%;
  cursor: pointer;
  background: rgba(0,0,0,.8);
  color: #fff;
  z-index: 20;
}
#gnavi .closer span {
  display: inline-block;
  padding-left: 24px;
  background: url(../img/com-gnavi-btn-close.png) no-repeat;
  background-position: left top 2px;
  background-size: 22px;
  font-size: 18px;
}


/* gnavi-menu-area */

#gnavi .menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background:url(../img/img-common-bg-gnavi.jpg) repeat;
  
  background: #ccc;
}

/* gnavi-menu-inner */

#gnavi .inn {
  max-width: 560px;
  margin: auto;
  padding: 0 24px 24px;
}


/* gnavi-item */

#gnavi .item {
}

/* gnavi-link */

#gnavi .link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>

<!-- HTML -->

<div id="gnavi">
    <div class="area">
        <div class="closer"><span>touch close</span></div>

        <!-- 開閉ボタン -->
        <div class="btn">
        <small>メニュー</small>
            <div class="bar">
                <span></span>
                <span></span>
                <span></span>
                </div>
            <!-- /.btn-bar -->
        </div>
        <!-- /.btn -->
        <div class="close-btn"></div>

        <nav>
        <div class="menu">
            <ul class="inn">
                <li class="item"><div>リンク</div><a class="link" href="#"></a></li>
                <li class="item"></li>
                <li class="item"></li>
            </ul>
        </div>
        <!-- /.menu -->
        </nav>

    </div>
    <!-- /.gnavi__area -->
</div>
<!-- /#gnavi -->

<!-- ------------------------------------------ << / GLOBAL NAVI >> ------------------------------------------ -->

            </div>
            <!-- /.mvisual_header -->
        </div>
        <!-- /.mvisual_inn -->
    </div>
    <!-- /.mvisual__area -->
</div>
<!-- /#header -->
</header>

一応上記で動いていますが、もう少しスマートなやり方はないでしょうか？
ボタンの上に別の要素を被せるのではなく、JQueryでなんとかできればと思います。

よろしくお願い致します。

x_x

2019/12/03 04:55

問題の再現する CSS を書いてください。

lingwood

2019/12/03 05:31

x_x　様気に留めて下さってありがとうございます！！ CSS追加いたしました。よろしくお願いします。

x_x

2019/12/03 06:16

これで開くボタンってありますかね？

lingwood

2019/12/03 07:40

x_x　様お返事ありがとうございます。一応動いてはいるのですが、できれば改善したいです。一旦別の方法で今のところ動いています。もっと良い方法がありましたら教えて欲しいです。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

ボタンを複数置くと煩雑になるので一つでできるようにしたほうがいいでしょう。
スクロールバーによる位置ずれはスクリプトで補正します。

jQuery
1  $('#gnavi .btn').on('click', function() {
2    if ($('#gnavi').hasClass('active')) {
3      $('#gnavi').toggleClass('active');
4      $('#gnavi .menu, #gnavi .closer').fadeToggle();
5      $('body').removeAttr('data-menu');
6      $('#gnavi .area').css('padding-right', '0');
7    } else {
8      $('#gnavi').toggleClass('active');
9      $('#gnavi .menu, #gnavi .closer').fadeToggle();
10      var cw = document.body.clientWidth;
11      $('body').attr('data-menu', 'menu'); // overflow: hidden;
12      $('#gnavi .area').css('padding-right', document.body.clientWidth - cw);
13    }
14  });
15
16  $('#gnavi .closer').on('click', function() {
17    $('#gnavi .btn').trigger('click');
18  });

参考：スクロールバーの幅を考慮したモーダル処理
http://bashalog.c-brains.jp/17/04/10-163000.php

投稿2019/12/05 05:22

x_x

総合スコア13749

lingwood

2019/12/05 06:57

x_x　様ご回答ありがとうございます！大変勉強になります。ご回答いただいた中で1点、「ボタンは1つに」という点ですが、・メインのボタン　#gnavi .btn ・ナビの中に配置した閉じるためのボタン　#gnavi .closer これがあると出来ないという意味になりますでしょうか？利便性を考えると2つある方が良いと言われているので・・・どうしたものか・・・ただ、スクロールバーの考慮など本当にありがとうございます！！すごく勉強になります。またよろしくお願いします。

x_x

2019/12/05 08:12

.close-btn が不要という意味です。

lingwood

2019/12/05 09:33

x_x　様ご回答ありがとうございます！すごいです！だんだん理解できそうなとこまで来ているのですが・・・もう少し教えてもらえますか？ 2つ分からない部分があります。 1.独自データ属性data-menuをフック？に使ってmenu属性を与え、スクロールバーを消す＝overflow:hiddenにしている。　という理解で良いのでしょうか？ 2..close-btnを消して、これをこのまま実行してもまだスクロールバーは出たままですが、CSSかスクリプトで何かを足してあげなければいけないのでしょうか？

x_x

2019/12/05 09:55

1. その通りです。class などでもいいでしょう。 2. #gnavi .menu に overflow-y: scroll; があるのでそのスクロールバーでは？

lingwood

2019/12/05 10:14

ありがとうございます！なるほどです！！ただ、2.のoverflow-yを消してもまだスクロールバーが出たままなので、menu属性のほうも含め、明日もう少し検証させてください！お忙しいところインターラプトしてもらってすみません。ありがとうございます！！

lingwood

2019/12/06 05:46

x_x　様お世話になります！昨日はありがとうございました！！今日は、まだできていないのですがいくつか仕事がバタバタと入ってしまい、検証できず仕舞いなのですが、忘れないようベストアンサーにさせていただきました！！また検証してみますので、もし、もし分からなかったらまた教えてください。取り急ぎですが、本当にありがとうございました！！

lingwood

2019/12/11 09:38

x_x　様お世話になります。先日はありがとうございました。少しバタついてしまい検証が遅れてしまいました。ご教示いただきましたコードのdata-menuの箇所に直接css('overflow','hidden')を与えることで理想とする動きができました。独自データの使い方が分かってないので何とも不勉強が悩ましいところですが、すごく助かりました！またボタン位置が動かないようにするなどの配慮もしていただいていたようで、実行してみて多くの気づきがありました。取り急ぎで恐縮ですが、本当にありがとうございました！またよろしくお願い致します！！

行動規範の内容に同意します