今回やりたいこと

スマホのハンバーガーメニューが開いているときに、背景のスクロールを禁止させたいというシチュエーションです。

PCではアコーディオンを実装しないので、スマホのみの適用とさせます。
※media queryの指定を外せばPCとスマホどちらも適用させることができます。

JavaScriptの記述

今回はjQueryの記述になります。ハンバーガーアイコンの切り替えや、グローバルナビゲーションの表示・非表示の切り替えをするためのJavaScriptの記述は省略しています。

$(function () {
  $(".js-trigger").click(function () {　  // トリガーをクリックした時の条件分岐
    if ($(this).hasClass("is-active")) {  // ナビを閉じるときの処理
      $("html").removeClass("is-fixed");  // 背景固定解除！
    } else {                              // ナビを開くときの処理
      $("html").addClass("is-fixed");     // 背景固定！
    }
  });
});

“js-trigger”というのがハンバーガーアイコンです。ハンバーガーアイコンをクリックした時に、ナビが開いている状態だったらナビを閉じるための処理、そうでなければナビを開くときの処理という条件分岐になっています。

ポイントはhtml要素に付与している“is-fixed”クラスです。このクラスをCSSで制御することで背景固定を実現します。

CSSの記述

html要素に”is-fixed”クラスが付いている場合のCSSを記述します。

html.is-fixed,
html.is-fixed body {
  @media all and (max-width: 767px) {
    height: 100%;
    overflow: hidden;
  }
}

「overflow: hidden;」によってスクロールができなくなります。

補足

コンテンツ内（ハンバーガーメニューの中身）はスクロールすることができます。モーダルウィンドウなど別の場面でも活用することができると思うのでぜひ試してみてください。