✅ 【JavaScript】ハンバーガーメニューを開いたときに背景をスクロールさせない方法

スマホサイトでよく見かけるハンバーガーメニュー。
メニューを開いたとき、背景（ページ全体）がスクロールできてしまうのはUX的に少し困りますよね。

今回は、JavaScript（jQuery）でハンバーガーメニューを開いたときに背景を固定（スクロールできないように）する方法を、初心者向けにわかりやすく解説します！

🧩 なぜ背景がスクロールするのを防ぐ必要があるの？

• メニューを開いた状態でも背景がスクロールできると、誤タップや違和感の原因に。
• ユーザーの視点がぶれず、UIが安定して見える。
• 特に縦長のページで効果的。

✅ 実装方法（jQuery）

① HTML構造の例

<!-- ハンバーガーボタン -->
<button id="hamburger-btn" aria-label="メニューを開く">
  <span></span><span></span><span></span>
</button>

<!-- メニュー本体 -->
<nav id="nav-menu" class="menu">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

② CSSで基本スタイル

body.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden;
}

.menu {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 1000;
}

.menu.active {
  display: block;
}

③ jQueryでメニュー開閉＋背景固定

let scrollPosition = 0;

$('#hamburger-btn').on('click', function () {
  if ($('#nav-menu').hasClass('active')) {
    // メニューを閉じるとき
    $('#nav-menu').removeClass('active');
    $('body').removeClass('fixed').css({ top: '' });
    $(window).scrollTop(scrollPosition); // 元の位置に戻す
  } else {
    // メニューを開くとき
    scrollPosition = $(window).scrollTop();
    $('#nav-menu').addClass('active');
    $('body').addClass('fixed').css({ top: -scrollPosition + 'px' });
  }
});

📝 補足ポイント

• body.fixed の position: fixed で画面をロック。
• top に現在のスクロール位置を指定して「見た目がずれないように」する。
• メニューを閉じたときに scrollTop() で元の位置に戻すのが大事！

✅ よくあるミスと注意点

✅ まとめ

ハンバーガーメニューを開いたときに背景が動いてしまうのは、ちょっとしたストレスにつながります。
シンプルなコードで改善できるので、ぜひ取り入れてみてくださいね！

✉️ あなたのリクエスト教えてください！

「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！」
そんな声を、ぜひXのDMで教えてください！😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます！

▶️ Xもフォローしてもらえるとめちゃくちゃ嬉しいです！