ハンバーガーメニューを100pxほどスクロールして開いた時の×の色を変更したいです。

実現したいこと

ここに実現したいことを箇条書きで書いてください。
・ハンバーガーメニューを100pxほどスクロールしてから開いて、閉じる際に×の色が見えにくいため変更したいです。

前提

web制作の学習教材でポートフォリオにも利用する予定です。
上部にあるヘッダーとは別に、
スクロールしたら違う背景色のヘッダーが画面上部から降りてきて固定するようにしております。
ハンバーガーメニューもスクロールされたら色が変わるようにしており、
ここが関係してるかと思われます。

どなたかお力添えいただけますと幸いです。

発生している問題・エラーメッセージ

100pxスクロールしてから、ハンバーガーメニューを開いた時の×の色の変更ができないです。

該当のソースコード

HTML
1<header class="header__main-page" data-aos="fade-up">
2      <div class="header-inner inner">
3        <h1 class="header__main-logo"><a href="./index.html"><img src=""></a></h1>
4        <ul class="header-nav">
5          <li><a href="room.html">ナビ１</a></li>
6          <li><a href="food.html">ナビ２</a></li>
7          <li><a href="spa.html">ナビ３</a></li>
8        </ul>
9      </div>
10</header>
11
12<!-- スクロールすると上から出現するヘッダー -->
13    <header class="header__main-page-fixed">
14        <div class="header-inner inner">
15          <h1 class="header__lower-logo"><a href="./index.html"><img class="header__lower-logo-img" src="" alt=""></a></h1>
16          <ul class="header-nav">
17            <li><a href="room.html">ナビ１</a></li>
18            <li><a href="food.html">ナビ２</a></li>
19            <li><a href="spa.html">ナビ３</a></li>
20          </ul>
21        </div>
22</header>
23
24<!-- ハンバーガーメニュー -->
25    <div class="drawer-icon">
26      <div class="drawer-icon-bars">
27        <div class="drawer-icon-bar1 top-drawer"></div>
28        <div class="drawer-icon-bar2 top-drawer"></div>
29        <div class="drawer-icon-bar3 top-drawer"></div>
30      </div>
31    </div>
32    <div id="#drawer" class="drawer-content">
33      <ul class="drawer-content-items">
34        <li class="drawer-content-item"><a class="drawer-link" href="room.html">ナビ１</a></li>
35        <li class="drawer-content-item"><a class="drawer-link" href="food.html">ナビ２</a></li>
36        <li class="drawer-content-item"><a class="drawer-link" href="spa.html">ナビ３</a></li>
37      </ul>
38    </div>
39    <div class="drawer-background top-background"></div>

SCSS
1$color-white: #fff;
2$color-black: #000;
3
4// 表示幅 //
5$layout-width-inner: 1200px;
6
7//ブレークポイント//
8$breakpoints: (
9//キー : 値
10  'sp': "(max-width: 767px)", 
11  'tab': "(min-width: 768px) and (max-width: #{$layout-width-inner - 1px})", 
12  'pc': "(min-width: #{$layout-width-inner})"
13) !default;
14
15//メディアクエリー//
16@mixin mq($breakpoint:sp) {
17    @media #{map-get($breakpoints, $breakpoint)} {
18        @content;
19    }
20}
21.inner {
22  width: 100%;
23  max-width: 100%;
24  margin: 0 auto;
25  padding-right: 20px;
26  padding-left: 20px;
27
28  @include mq('sp') {
29      padding-right: 20px; 
30      padding-left: 20px;
31  }
32
33  @include mq('tab') {
34      padding-left: 24px;
35      padding-right: 24px;
36  }
37}
38
39// header
40.header__main-page-fixed {
41  background: $color-white;
42  height: 80px;
43  position: fixed;
44  z-index: 100;
45  width: 100%;
46  top: 0;
47  display: none;
48
49  .header__lower-logo {
50    width: 200px;
51    max-width: 100%;
52
53    &.negative {
54      display: none;
55    }
56  
57    @include mq('sp') {
58      width: 150px;
59    }
60  }
61
62  .header-nav {
63    color: $color-black;
64  }
65}
66.header__main-page {
67  background: $color-black;
68  height: 80px;
69  width: 100%;
70
71  .header__main-logo {
72    width: 200px;
73    max-width: 100%;
74  
75    @include mq('sp') {
76      width: 150px;
77    }
78  }
79}
80.header-inner {
81  display: flex;
82  align-items: center;
83  height: inherit;
84  width: 100%;
85  max-width: 100%;
86
87  @include mq('tab') {
88      width: 100%;
89  }
90
91  @include mq('sp') {
92      width: 100%;
93  }
94}
95.header-nav {
96  color: $color-white;
97  display: flex;
98  margin-left: 120px;
99
100  li {
101    &:not(:first-child) {
102      margin-left: 30px;
103    }
104  }
105
106  a {
107    &:hover {
108      opacity: 0.7;
109    }
110  }
111
112  @include mq('sp') {
113    display: none;
114  }
115}
116// ハンバーガーメニュー
117.drawer-icon {
118  position: fixed;
119  top: 27px;
120  right: 20px;
121  z-index: 300;
122  display: none;
123  transition: transform 0.5s ease 0s;
124
125  @include mq('sp') {
126      display: block;
127  }
128
129  &.is-active {
130      transform: translateX(-300px);
131
132      .drawer-icon-bar1 {
133          transform: rotate(-45deg);
134          top: 8px;
135          background: $color-white;
136      }
137      .drawer-icon-bar2 {
138          display: none;
139      }
140      .drawer-icon-bar3 {
141          transform: rotate(45deg);
142          top: 8px;
143          background: $color-white;
144      }
145  }
146}
147
148
149.drawer-icon-bars {
150  width: 30px;
151  height: 26px;
152  display: block;
153  position: relative;
154}
155
156.drawer-icon-bar1,
157.drawer-icon-bar2,
158.drawer-icon-bar3 {
159  position: absolute;
160  width: 30px;
161  height: 2px;
162  top: 0;
163  left: 0;
164  transition: background-color 1s;
165  
166  &.top-drawer {
167    transition: background-color 1s;
168  }
169}
170
171.drawer-icon-bar1 {
172  top: 0;
173}
174.drawer-icon-bar2 {
175  top: 13px;
176}
177.drawer-icon-bar3 {
178  top: 26px;
179}
180.drawer-content {
181  width: 300px;
182  height: 100%;
183  position: fixed;
184  right: 0;
185  top: 0;
186  background: $color-white;
187  z-index: 220;
188  transform: translateX(105%);
189  transition: transform 0.5s ease 0s;
190
191  &.is-active {
192      transform: translateX(0);
193  }
194}
195.drawer-content-items {
196
197}
198.drawer-content-item {
199  border-bottom: 1px solid #707070;
200
201  a {
202      display: block;
203      font-weight: bold;
204      color: $color-black;
205      text-decoration: none;
206      padding: 18px 20px;
207      position: relative;
208
209      &::after {
210          content: "";
211          position: absolute;
212          right: 20px;
213          top: 50%;
214          transform: translateY(-50%);
215          width: 8px;
216          height: 11px;
217      }
218  }
219}
220.drawer-background {
221  position: fixed;
222  top: 0;
223  left: 0;
224  width: 100%;
225  height: 100%;
226  background-color: rgba(#000, 0.8);
227  z-index: 200;
228  display: none;
229  
230  &.is-active {
231      display: block;
232  }
233
234  &.top-background {
235    background-color: rgba(#000, 0.8);
236  }
237}

JS
1// トップページからスクロールしたらヘッダーを上からぬるりと表示させる
2var headNav = $(".header__main-page-fixed");
3/* 初期表示、スクロール時にイベント開始 */
4jQuery(window).on("load scroll", function () {
5    /* スクロール位置の高さが100pxより大きい、かつis-fixedクラスがない場合 */
6    if (jQuery(this).scrollTop() > 100 && headNav.hasClass("is-fixed") == false) {
7        headNav.css("display", "block");
8        headNav.css({ "top": "-80px" }); /* ヘッダーの高さ分マイナスにする */
9        headNav.addClass("is-fixed");
10        headNav.animate({ "top": 0 }, 600);
11    }
12    /* スクロール位置の高さが100pxより小さい、かつis-fixedクラスがある場合 */
13    else if (jQuery(this).scrollTop() < 100 && headNav.hasClass("is-fixed") == true) {
14        headNav.removeClass("is-fixed");
15        headNav.css("display", "none");
16    }
17});
18// トップページからスクロールしたらハンバーガーメニューの色を変える
19jQuery(window).on('scroll',function(){
20    if ( 100 < jQuery(this).scrollTop()){
21      jQuery('.top-drawer').css('background-color', '#000');
22    }
23    else {
24      jQuery('.top-drawer').css('background-color', '#fff');
25    }
26});
27// ドロワーメニュー
28jQuery('.drawer-icon').on('click', function(e) {
29    e.preventDefault();
30    jQuery('.drawer-icon').toggleClass('is-active');
31    jQuery('.drawer-content').toggleClass('is-active');
32    jQuery('.drawer-background').toggleClass('is-active');
33return false;
34});
35  
36// backgroundをクリックしたら閉じる
37jQuery('.drawer-background').on('click', function() {
38    jQuery('.drawer-icon').removeClass('is-active');
39    jQuery('.drawer-content').removeClass('is-active');
40    jQuery('.drawer-background').removeClass('is-active');
41    return false;
42});
43

試したこと

JS20行目で
if ( 100 < jQuery(this).scrollTop() && jQuery('.drawer-icon').hasClass('is-active') == false)
を試しましたが変わりませんでした。

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

多分、スクロールした時だけではなく、
ハンバーガーメニューのボタンをタップした時にも
色を変更しないといけないのかなと思いました。

// ---のところに関数を追加してみたのですが、いかがでしょうか。
(関数の呼び出しもともいくつかあります)
(100pxスクロールしてから、ハンバーガーメニューを開いた時の×の色は「白」にしてしまっていますので、パターンに合わせて変更してみてください)

js
1// トップページからスクロールしたらヘッダーを上からぬるりと表示させる
2var headNav = $(".header__main-page-fixed");
3/* 初期表示、スクロール時にイベント開始 */
4jQuery(window).on("load scroll", function () {
5    /* スクロール位置の高さが100pxより大きい、かつis-fixedクラスがない場合 */
6    if (jQuery(this).scrollTop() > 100 && headNav.hasClass("is-fixed") == false) {
7        headNav.css("display", "block");
8        headNav.css({ "top": "-80px" }); /* ヘッダーの高さ分マイナスにする */
9        headNav.addClass("is-fixed");
10        headNav.animate({ "top": 0 }, 600);
11    }
12    /* スクロール位置の高さが100pxより小さい、かつis-fixedクラスがある場合 */
13    else if (jQuery(this).scrollTop() < 100 && headNav.hasClass("is-fixed") == true) {
14        headNav.removeClass("is-fixed");
15        headNav.css("display", "none");
16    }
17});
18// トップページからスクロールしたらハンバーガーメニューの色を変える
19jQuery(window).on('scroll',function(){
20    // if ( 100 < jQuery(this).scrollTop()){
21    //   jQuery('.top-drawer').css('background-color', '#000');
22    // }
23    // else {
24    //   jQuery('.top-drawer').css('background-color', '#fff');
25    // }
26    setTopDrawerBackgroundColor();
27});
28// ドロワーメニュー
29jQuery('.drawer-icon').on('click', function(e) {
30    e.preventDefault();
31    jQuery('.drawer-icon').toggleClass('is-active');
32    jQuery('.drawer-content').toggleClass('is-active');
33    jQuery('.drawer-background').toggleClass('is-active');
34    setTopDrawerBackgroundColor();
35    return false;
36});
37  
38// backgroundをクリックしたら閉じる
39jQuery('.drawer-background').on('click', function() {
40    jQuery('.drawer-icon').removeClass('is-active');
41    jQuery('.drawer-content').removeClass('is-active');
42    jQuery('.drawer-background').removeClass('is-active');
43    setTopDrawerBackgroundColor();
44    return false;
45});
46
47// --- ハンバーガーメニューの色を設定します。
48function setTopDrawerBackgroundColor() {
49    const top100 = jQuery(this).scrollTop() <= 100;
50    const isActive = jQuery('.drawer-icon').hasClass('is-active');
51    const pattern1 = top100 && isActive;
52    const pattern2 = top100 && !isActive;
53    const pattern3 = !top100 && isActive;
54    const pattern4 = !top100 && !isActive;
55    // 100pxスクロールして、閉じている時だけ黒色
56    if (pattern4) {
57        jQuery('.top-drawer').css('background-color', '#000');
58        return;
59    }
60    // 上記以外の場合は白色
61    jQuery('.top-drawer').css('background-color', '#fff');
62}

追記です。

コメントありがとうございます。
解決したようで良かったです。

最初に回答したコードにつきまして、
意図が明確ではなかった部分がありましたので、
追記しておきます。

「this」を使ってしまうと、関数の記述場所などによって動きが変わってしまうこともあるみたいです。
今回はブラウザー全体のスクロール位置を判断するということで、
「window」と記述した方が後からコードを読んだ際に意図を理解しやすいと思いました。
(今回はたまたま動きが同じだったっぽいですので、コピペしたまま気づけませんでした・・)
(他の部分に記述してある「this」はそのままで大丈夫と思います)

js
1// function setTopDrawerBackgroundColor() {
2//     const top100 = jQuery(this).scrollTop() <= 100;
3function setTopDrawerBackgroundColor() {
4    const top100 = jQuery(window).scrollTop() <= 100; // ← この行については「this」より「window」にしておいた方が「ブラウザー全体のスクロール位置」という意図が伝わりやすいかもしれません

「this」はちょっとややこしいです・・
余裕がありましたら次のリンク先も見てみると良いかもしれません。

this - JavaScript | MDN
globalThis - JavaScript | MDN

＊質問欄の問題が解決しましたら、解決済みにしておくと良いと思います。

投稿2023/04/17 14:58

編集2023/04/18 11:40

退会済みユーザー

総合スコア0

rei0099

2023/04/18 01:00

KEMONO_PANTSU_k様ご回答ありがとうございます！ご教示いただいた関数をもとに、こちらでも設定してみたのですが、なぜかpattern2が適用されないようでした。 pattern4を#000にすると適用されますが、pattern1~3も#000となってしまいます。設定が重複してしまっているのか、設定が間違っているのかと考えております。 pattern1~4の設定を変更したりして試しているのですが、思った通りになりませんでした。恐縮ですが、お手すきの際に再度ご教示いただけますと幸いです。 sassとhtmlは同様に jsは下記コードに設定しております。 // --- ハンバーガーメニューの色を設定します。 function setTopDrawerBackgroundColor() { const top100 = jQuery(this).scrollTop() <= 100; const isActive = jQuery('.drawer-icon').hasClass('is-active'); const pattern1 = top100 && isActive; const pattern2 = top100 && !isActive; const pattern3 = !top100 && isActive; const pattern4 = !top100 && !isActive; if (pattern1) { jQuery('.top-drawer').css('background-color', '#fff'); return; } else if (pattern2) { jQuery('.top-drawer').css('background-color', '#000'); return; } else if (pattern3) { jQuery('.top-drawer').css('background-color', '#fff'); return; } else if (pattern4) { jQuery('.top-drawer').css('background-color', '#fff'); return; } // 上記以外の場合は白色 jQuery('.top-drawer').css('background-color', '#fff'); }; setTopDrawerBackgroundColor();

退会済みユーザー

2023/04/18 01:30

コメントありがとうございます。＊回答者がここにコメントしても通知が届かないみたいですので、気づかないかもしれませんが・・他の部分のコードが影響してしまっているのでしょうかね。パターンの整理ですが、次のようになります。・パターン1は100px以内でメニューが開いている時・パターン2は100px以内でメニューが閉じている時・パターン3は100pxより大きくてメニューが開いている時・パターン4は100pxより大きくてメニューが閉じている時パターン1、2は変更したいという質問内容ではなかったようですので、質問欄に記載されているコードの通り黒で良いのですよね？変更したいのは3の時ですよね。 setTopDrawerBackgroundColor()関数の呼び出しをどこに記述したのか、コメントのコードからは読み取れなかったのですが、どこに入れましたでしょうか？次の3箇所に必要です。 (質問欄のコードが全体のコードではないとすると、他の処理も見直ししないとかもしれません) ・`jQuery(window).on('scroll'` ← 既存の処理をコメントアウトしています。・`jQuery('.drawer-icon').on('click'` ・`jQuery('.drawer-background').on('click'` --- 他には、コンソールに次の内容を出力してパターンの処理が適切か確認してみると良いかもしれません。 ```js console.log(`top100: ${top100}, isActive: ${isActive}`) ``` ブラウザーの開発ツールから要素のスタイルが適切か確認してみると良いかもしれません。

rei0099

2023/04/18 11:10

KEMONO_PANTSU_k様立て続けにご教示いただきましてありがとうございます！確認したところ関数の呼び出しが全くなっておりませんでした（記述しておりませんでした）、、、。途中でそれに気づいたのですが、関数の呼び出しはどこでも良いのかと思ってしまいまして、『// --- ハンバーガーメニューの色を設定します。』で設定を記述した後の外にだけ記述しておりました。ちょうど返信したコメントの一番下のところです。ご教示してくださったように関数の呼び出しを3箇所に記述したところ思った通りに実装することができました！確認するのが遅くなってしまいまして申し訳ありませんでした。やり方が違うのかと思ってファイルを作り直したりして他にも色々試してるうちに時間がかかってしまいました。この度はご教示してくださって誠にありがとうございました！ jqueryの関数の使い方とハンバーガーメニューについても大変勉強になりました。

rei0099

2023/04/18 11:47

追記ありがとうございます！私の方もまだまだ浅学非才なために、質問において説明不足な点もあったかと思いますが、丁寧に教えてくださってありがとうございました！せっかくの機会ですので貼ってくださったリンク先も目を通してみて、 windowとthisについてもう少し理解を深めます。またご縁がありましたらよろしくお願いします！

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