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

Question

実現したいこと

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

前提

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

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

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

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

該当のソースコード

<header class="header__main-page" data-aos="fade-up">
      <div class="header-inner inner">
        <h1 class="header__main-logo"><a href="./index.html"><img src=""></a></h1>
        <ul class="header-nav">
          <li><a href="room.html">ナビ１</a></li>
          <li><a href="food.html">ナビ２</a></li>
          <li><a href="spa.html">ナビ３</a></li>
        </ul>
      </div>
</header>

<!-- スクロールすると上から出現するヘッダー -->
    <header class="header__main-page-fixed">
        <div class="header-inner inner">
          <h1 class="header__lower-logo"><a href="./index.html"><img class="header__lower-logo-img" src="" alt=""></a></h1>
          <ul class="header-nav">
            <li><a href="room.html">ナビ１</a></li>
            <li><a href="food.html">ナビ２</a></li>
            <li><a href="spa.html">ナビ３</a></li>
          </ul>
        </div>
</header>

<!-- ハンバーガーメニュー -->
    <div class="drawer-icon">
      <div class="drawer-icon-bars">
        <div class="drawer-icon-bar1 top-drawer"></div>
        <div class="drawer-icon-bar2 top-drawer"></div>
        <div class="drawer-icon-bar3 top-drawer"></div>
      </div>
    </div>
    <div id="#drawer" class="drawer-content">
      <ul class="drawer-content-items">
        <li class="drawer-content-item"><a class="drawer-link" href="room.html">ナビ１</a></li>
        <li class="drawer-content-item"><a class="drawer-link" href="food.html">ナビ２</a></li>
        <li class="drawer-content-item"><a class="drawer-link" href="spa.html">ナビ３</a></li>
      </ul>
    </div>
    <div class="drawer-background top-background"></div>

$color-white: #fff;
$color-black: #000;

// 表示幅 //
$layout-width-inner: 1200px;

//ブレークポイント//
$breakpoints: (
//キー : 値
  'sp': "(max-width: 767px)", 
  'tab': "(min-width: 768px) and (max-width: #{$layout-width-inner - 1px})", 
  'pc': "(min-width: #{$layout-width-inner})"
) !default;

//メディアクエリー//
@mixin mq($breakpoint:sp) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}
.inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-right: 20px;
  padding-left: 20px;

  @include mq('sp') {
      padding-right: 20px; 
      padding-left: 20px;
  }

  @include mq('tab') {
      padding-left: 24px;
      padding-right: 24px;
  }
}

// header
.header__main-page-fixed {
  background: $color-white;
  height: 80px;
  position: fixed;
  z-index: 100;
  width: 100%;
  top: 0;
  display: none;

  .header__lower-logo {
    width: 200px;
    max-width: 100%;

    &.negative {
      display: none;
    }
  
    @include mq('sp') {
      width: 150px;
    }
  }

  .header-nav {
    color: $color-black;
  }
}
.header__main-page {
  background: $color-black;
  height: 80px;
  width: 100%;

  .header__main-logo {
    width: 200px;
    max-width: 100%;
  
    @include mq('sp') {
      width: 150px;
    }
  }
}
.header-inner {
  display: flex;
  align-items: center;
  height: inherit;
  width: 100%;
  max-width: 100%;

  @include mq('tab') {
      width: 100%;
  }

  @include mq('sp') {
      width: 100%;
  }
}
.header-nav {
  color: $color-white;
  display: flex;
  margin-left: 120px;

  li {
    &:not(:first-child) {
      margin-left: 30px;
    }
  }

  a {
    &:hover {
      opacity: 0.7;
    }
  }

  @include mq('sp') {
    display: none;
  }
}
// ハンバーガーメニュー
.drawer-icon {
  position: fixed;
  top: 27px;
  right: 20px;
  z-index: 300;
  display: none;
  transition: transform 0.5s ease 0s;

  @include mq('sp') {
      display: block;
  }

  &.is-active {
      transform: translateX(-300px);

      .drawer-icon-bar1 {
          transform: rotate(-45deg);
          top: 8px;
          background: $color-white;
      }
      .drawer-icon-bar2 {
          display: none;
      }
      .drawer-icon-bar3 {
          transform: rotate(45deg);
          top: 8px;
          background: $color-white;
      }
  }
}


.drawer-icon-bars {
  width: 30px;
  height: 26px;
  display: block;
  position: relative;
}

.drawer-icon-bar1,
.drawer-icon-bar2,
.drawer-icon-bar3 {
  position: absolute;
  width: 30px;
  height: 2px;
  top: 0;
  left: 0;
  transition: background-color 1s;
  
  &.top-drawer {
    transition: background-color 1s;
  }
}

.drawer-icon-bar1 {
  top: 0;
}
.drawer-icon-bar2 {
  top: 13px;
}
.drawer-icon-bar3 {
  top: 26px;
}
.drawer-content {
  width: 300px;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  background: $color-white;
  z-index: 220;
  transform: translateX(105%);
  transition: transform 0.5s ease 0s;

  &.is-active {
      transform: translateX(0);
  }
}
.drawer-content-items {

}
.drawer-content-item {
  border-bottom: 1px solid #707070;

  a {
      display: block;
      font-weight: bold;
      color: $color-black;
      text-decoration: none;
      padding: 18px 20px;
      position: relative;

      &::after {
          content: "";
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          width: 8px;
          height: 11px;
      }
  }
}
.drawer-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(#000, 0.8);
  z-index: 200;
  display: none;
  
  &.is-active {
      display: block;
  }

  &.top-background {
    background-color: rgba(#000, 0.8);
  }
}

// トップページからスクロールしたらヘッダーを上からぬるりと表示させる
var headNav = $(".header__main-page-fixed");
/* 初期表示、スクロール時にイベント開始 */
jQuery(window).on("load scroll", function () {
    /* スクロール位置の高さが100pxより大きい、かつis-fixedクラスがない場合 */
    if (jQuery(this).scrollTop() > 100 && headNav.hasClass("is-fixed") == false) {
        headNav.css("display", "block");
        headNav.css({ "top": "-80px" }); /* ヘッダーの高さ分マイナスにする */
        headNav.addClass("is-fixed");
        headNav.animate({ "top": 0 }, 600);
    }
    /* スクロール位置の高さが100pxより小さい、かつis-fixedクラスがある場合 */
    else if (jQuery(this).scrollTop() < 100 && headNav.hasClass("is-fixed") == true) {
        headNav.removeClass("is-fixed");
        headNav.css("display", "none");
    }
});
// トップページからスクロールしたらハンバーガーメニューの色を変える
jQuery(window).on('scroll',function(){
    if ( 100 < jQuery(this).scrollTop()){
      jQuery('.top-drawer').css('background-color', '#000');
    }
    else {
      jQuery('.top-drawer').css('background-color', '#fff');
    }
});
// ドロワーメニュー
jQuery('.drawer-icon').on('click', function(e) {
    e.preventDefault();
    jQuery('.drawer-icon').toggleClass('is-active');
    jQuery('.drawer-content').toggleClass('is-active');
    jQuery('.drawer-background').toggleClass('is-active');
return false;
});
  
// backgroundをクリックしたら閉じる
jQuery('.drawer-background').on('click', function() {
    jQuery('.drawer-icon').removeClass('is-active');
    jQuery('.drawer-content').removeClass('is-active');
    jQuery('.drawer-background').removeClass('is-active');
    return false;
});

試したこと

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

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

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

Answer 1

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

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

// トップページからスクロールしたらヘッダーを上からぬるりと表示させる
var headNav = $(".header__main-page-fixed");
/* 初期表示、スクロール時にイベント開始 */
jQuery(window).on("load scroll", function () {
    /* スクロール位置の高さが100pxより大きい、かつis-fixedクラスがない場合 */
    if (jQuery(this).scrollTop() > 100 && headNav.hasClass("is-fixed") == false) {
        headNav.css("display", "block");
        headNav.css({ "top": "-80px" }); /* ヘッダーの高さ分マイナスにする */
        headNav.addClass("is-fixed");
        headNav.animate({ "top": 0 }, 600);
    }
    /* スクロール位置の高さが100pxより小さい、かつis-fixedクラスがある場合 */
    else if (jQuery(this).scrollTop() < 100 && headNav.hasClass("is-fixed") == true) {
        headNav.removeClass("is-fixed");
        headNav.css("display", "none");
    }
});
// トップページからスクロールしたらハンバーガーメニューの色を変える
jQuery(window).on('scroll',function(){
    // if ( 100 < jQuery(this).scrollTop()){
    //   jQuery('.top-drawer').css('background-color', '#000');
    // }
    // else {
    //   jQuery('.top-drawer').css('background-color', '#fff');
    // }
    setTopDrawerBackgroundColor();
});
// ドロワーメニュー
jQuery('.drawer-icon').on('click', function(e) {
    e.preventDefault();
    jQuery('.drawer-icon').toggleClass('is-active');
    jQuery('.drawer-content').toggleClass('is-active');
    jQuery('.drawer-background').toggleClass('is-active');
    setTopDrawerBackgroundColor();
    return false;
});
  
// backgroundをクリックしたら閉じる
jQuery('.drawer-background').on('click', function() {
    jQuery('.drawer-icon').removeClass('is-active');
    jQuery('.drawer-content').removeClass('is-active');
    jQuery('.drawer-background').removeClass('is-active');
    setTopDrawerBackgroundColor();
    return false;
});

// --- ハンバーガーメニューの色を設定します。
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;
    // 100pxスクロールして、閉じている時だけ黒色
    if (pattern4) {
        jQuery('.top-drawer').css('background-color', '#000');
        return;
    }
    // 上記以外の場合は白色
    jQuery('.top-drawer').css('background-color', '#fff');
}

追記です。

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

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

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

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

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

this - JavaScript | MDN
globalThis - JavaScript | MDN

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

Comments

[rei0099]

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();

[KEMONO_PANTSU_k]

コメントありがとうございます。
＊回答者がここにコメントしても通知が届かないみたいですので、気づかないかもしれませんが・・

他の部分のコードが影響してしまっているのでしょうかね。

パターンの整理ですが、次のようになります。

・パターン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]

KEMONO_PANTSU_k様
立て続けにご教示いただきましてありがとうございます！

確認したところ関数の呼び出しが全くなっておりませんでした（記述しておりませんでした）、、、。
途中でそれに気づいたのですが、
関数の呼び出しはどこでも良いのかと思ってしまいまして、
『// --- ハンバーガーメニューの色を設定します。』
で設定を記述した後の外にだけ記述しておりました。
ちょうど返信したコメントの一番下のところです。

ご教示してくださったように
関数の呼び出しを3箇所に記述したところ
思った通りに実装することができました！

確認するのが遅くなってしまいまして申し訳ありませんでした。
やり方が違うのかと思ってファイルを作り直したりして他にも色々試してるうちに
時間がかかってしまいました。

この度はご教示してくださって誠にありがとうございました！
jqueryの関数の使い方とハンバーガーメニューについても大変勉強になりました。

[rei0099]

追記ありがとうございます！
私の方もまだまだ浅学非才なために、
質問において説明不足な点もあったかと思いますが、
丁寧に教えてくださってありがとうございました！

せっかくの機会ですので貼ってくださったリンク先も目を通してみて、
windowとthisについてもう少し理解を深めます。

またご縁がありましたらよろしくお願いします！