複数ページにわたり、drawer-navを開いた時に、背景を固定させたい。

前提・実現したいこと

複数ページにわたり、humburgerをクリックし、navを開いた時に、背景を固定させたい。
現状:Topページでは動いていますが他の階層ページ(blog)では、動いていないです。
※blogのindex.htmlも同じCSSにしています。
HTMLのclassに反応がないです！！

    $('html').removeclass('scroll-prevent') // 追記
    $('html').toggleClass('scroll-prevent') // 追記

を使って、実装しようとしています。

試したこと

下記のサイトを見て行いましたが、できませんでした。
背景を固定

該当のソースコード

1つ目はTopページ↓

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Drawer</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
 
</head>

<body>

<div class="wrapper">
  <main>
    <h1>ドロワーメニュー</h1>
    <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
  </main>
  <div class="hamburger_button" href="">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <nav class="menu-trigger">
    <ul>
      <li>MENU</li>
      <li>MENU</li>
      <li>MENU</li>
    </ul>
  </nav>
  <div class="overlay"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="./jquery-3.6.0.min.js"></script>
<script src="./script.js"></script>
</body>
</html>

仮のblog site

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <title>Drawer</title>
7  <link rel="stylesheet" type="text/css" href="./../style.css">
8 
9</head>
10
11<body>
12
13<div class="wrapper">
14  <main>
15    <h1>ドロワーメニュー</h1>
16    <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
17  </main>
18  <div class="hamburger_button" href="">
19    <span></span>
20    <span></span>
21    <span></span>
22  </div>
23  <nav class="menu-trigger">
24    <ul>
25      <li><a href="../humberger-menu.html"></a></li>
26      <li>MENU</li>
27      <li>MENU</li>
28    </ul>
29  </nav>
30  <div class="overlay"></div>
31</div>
32<br>
33<br>
34<br>
35<br>
36<br>
37<br>
38<br>
39<br>
40<br>
41<br>
42<script src="../jquery-3.6.0.min.js"></script>
43<script src="../script.js"></script>
44</body>
45</html>

CSS
1
2
3  @charset 'UTF-8';
4
5  body {
6    font-family: "æ¸¸ã‚´ã‚·ãƒƒã‚¯", "Yu Gothic", "ãƒ¡ã‚¤ãƒªã‚ª", Meiryo, "Meiryo UI", "ãƒ’ãƒ©ã‚®ãƒŽè§’ã‚´ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
7    font-size: 16px;
8    line-height: 1.5;
9    margin: 0;
10  }
11.scroll-prevent {
12    /*動き固定*/
13    position: fixed;
14    /*奥行きを管理*/
15    z-index: -1;
16    /*下2つで背景を元のサイズのまま表示することができる*/
17    width: 100%;
18    height: 100%;
19  }
20  * {
21    box-sizing: border-box;
22  }
23  ul {
24    list-style: none;
25    margin: 0;
26    padding: 0;
27  }
28  
29  ------------------------------------------------- */
30  .wrapper {
31    height: 100%;
32    overflow-x: hidden;
33    position: relative;
34  }
35  .overlay {
36    content: "";
37    display: block;
38    width: 0;
39    height: 0;
40    background-color: rgba(0, 0, 0, 0.5);
41    position: absolute;
42    top: 0;
43    left: 0;
44    z-index: 2;
45    opacity: 0;
46    transition: opacity .5s;
47  }
48  .overlay.open {
49    width: 100%;
50    height: 100%;
51    opacity: 1;
52  }
53  main {
54    height: 100%;
55    min-height: 100vh;
56    padding: 0 50px;
57    background-color: #eee;
58    transition: all .5s;
59    display: flex;
60    flex-direction: column;
61    justify-content: center;
62  }
63  main.open {
64    transform: translateX(-250px);
65  }
66  main h1 {
67    text-align: center;
68    font-weight: 500;
69  }
70  main p {
71    text-align: center;
72  }
73  .hamburger_button {
74    display: inline-block;
75    width: 36px;
76    height: 28px;
77    vertical-align: middle;
78    cursor: pointer;
79    position: fixed;
80    top: 30px;
81    right: 30px;
82    z-index: 100;
83   
84  }
85
86.hamburger_button span {
87    display: inline-block;
88    box-sizing: border-box;
89    position: absolute;
90    left: 0;
91    width: 100%;
92    height: 4px;
93    background-color: #000;
94    transition: all .5s;
95  }
96  .hamburger_button.active span {
97    background-color: #fff;
98  }
99  .hamburger_button span:nth-of-type(1) {
100    top: 0;
101  }
102  .hamburger_button.active span:nth-of-type(1) {
103    transform: translateY(12px) rotate(-45deg);
104  }
105  .hamburger_button span:nth-of-type(2) {
106    top: 12px;
107  }
108  .hamburger_button.active span:nth-of-type(2) {
109    opacity: 0;
110  }
111  .hamburger_button span:nth-of-type(3) {
112    bottom: 0;
113  }
114  .hamburger_button.active span:nth-of-type(3) {
115    transform: translateY(-12px) rotate(45deg);
116  }
117  
118  .menu-trigger {
119    width: 250px;
120    height: 100%;
121    padding-top: 100px;
122    background-color: rgb(16, 69, 153, 0.8);
123    position: fixed;
124    top: 0;
125    right: 0;
126    z-index: 10;
127    transform: translate(250px);
128    transition: all .5s;
129  }
130  .menu-trigger.open {
131    transform: translateZ(0);
132  }
133  .menu-trigger li {
134    color: #fff;
135    text-align: center;
136    padding: 10px 0;
137  }

js
1$(function(){
2    $('.hamburger_button').on('click',function(){
3  $('html').toggleClass('scroll-prevent')
4        if($(this).hasClass('active')){
5          $(this).removeClass('active');
6          $('main').removeClass('open');
7          $('.menu-trigger').removeClass('open');
8          $('.overlay').removeClass('open');
9  $('html').removeclass('scroll-prevent') // 追記
10        } else {
11          $(this).addClass('active');
12          $('main').addClass('open');
13          $('.menu-trigger').addClass('open');
14          $('.overlay').addClass('open');
15        }
16      });
17      $('.overlay').on('click',function(){
18        if($(this).hasClass('open')){
19          $(this).removeClass('open');
20          $('.menu-trigger').removeClass('active');
21          $('main').removeClass('open');
22          $('.menu-trigger').removeClass('open');      
23        }
24      });
25
26    var menu = $('.menu-trigger'),
27      menuBtn = $('.hamburger_button'),
28      body = $(document.body),
29      menuWidth = menu.outerWidth();
30   });
31  
32

こちらが本題です<(_ _)>
うまくいかないサイト

補足情報（FW/ツールのバージョンなど）

KAOsaka

2021/12/24 06:18

質問に不要な部分を省いて、問題の動作が再現する最小限のコードを載せてください。

free_teku

2021/12/24 06:28

修正依頼、ありがとうございます。<(_ _)> 修正いたします。今から、修正します

free_teku

2021/12/24 06:40

<br>と簡単なtxtを使って、、上下にスライドできるようにしました。ご教授頂けると幸いです。

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

回答1件

ベストアンサー

1段目の関数名が全て小文字になっています。

NG: removeclass
OK: removeClass

    $('html').removeclass('scroll-prevent') // 追記
    $('html').toggleClass('scroll-prevent') // 追記

追記

以下２つjsFiddleにて動作確認してみましたが、同じように見えます。
free_teku さんの環境では違っていますか？

追記

こちらが本題です<(_ _)>
うまくいかないサイト

JSエラーが発生しているようです。

見た感じ関数が閉じられていないので、確認してみてください。

投稿2021/12/24 09:55

編集2021/12/27 01:43

KAOsaka

総合スコア531

free_teku

2021/12/24 10:07 編集

ご回答ありがとうございます。 removeClass　修正させていただきましたが、変化ありませんでした。 JSファイルは、下層ページ、Topページ双方とも同じファイルを使っています。ご教授頂けると幸いです。よろしくお願いいたします。現状は、Topページで反応しますが、下層ページでは、反応しない現状があります。

KAOsaka

2021/12/24 10:20

追記しました。

free_teku

2021/12/25 03:30

ありがとうございます。結論こちらに関しては、成功できました。しかし、私が行いたいサイトではできないです。汗数時間考えていましたが、やっぱりできないです。もし、可能であれば原因追及サポートしていただきたいです<(_ _)>

KAOsaka

2021/12/27 01:43

追記しました。

free_teku

2021/12/27 09:01

KAosakaさん、ご回答や添削ありがとうございます。無事解決できました。初めは、小文字のために動いていなかったようでした。アドバイスありがとうございます！！また、動いたきっかけも別のファイルを設定していたために動いていませんでした。できる限り、落ち着いてミスをなくせるように今後はコードを書こうと思いました。この度は、本当にありがとうございます！

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