スクロールしたらメニューボタンの色を黒から白にしたい

Question

スクロールしたらメニューボタンの色を、黒から白にしたい

下記のようなコードにしたが、スクロールしても黒のままなので、なにが原因で白に変化しないのかが知りたい。

<div class="menu-trigger" href="">
    <span></span>
    <span></span>
    <span></span>
</div>

.menu-trigger {
    display: inline-block;
    width: 36px;
    height: 28px;
    vertical-align: middle;
    cursor: pointer;
    position: fixed;
    top: 22px;
    right: 30px;
    z-index: 100;
}

.menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #000;
    transition: all .5s;
}
.menu-trigger span:nth-of-type(1){top:0}.menu-trigger.active span:nth-of-type(1){transform:translateY(12px) rotate(-45deg)}.menu-trigger span:nth-of-type(2){top:12px}.menu-trigger.active span:nth-of-type(2){opacity:0}.menu-trigger span:nth-of-type(3){bottom:0}.menu-trigger.active span:nth-of-type(3){transform:translateY(-12px) rotate(45deg)}

.bg-is-white .menu-trigger span{background-color:#fff;}

   window.addEventListener("scroll", function () {
        // ヘッダーを変数の中に格納する
        const header = document.querySelector("menu-trigger span");
          // 1px以上スクロールしたらヘッダーに「scroll-nav」クラスをつける
        header.classList.toggle("bg-is-white", window.scrollY > 1);
    });

補足情報

こちら、案件で追加実装での内容となります。サイトの情報として、WP化してあり、jsやcssはコンパイル化していますが、コードを見やすくするために一部コンパイル化をなくして表示しております。

Answer 1

.bg-is-white .menu-trigger span{background-color:#fff;}

上記を下記に修正

.menu-trigger.bg-is-white span {background-color:#fff;}

        const header = document.querySelector("menu-trigger span");

上記を下記に修正

        const header = document.querySelector(".menu-trigger");

JSで .menu-trigger に bg-is-white を付加/削除する。

CSSは、.menu-trigger に .bg-is-white が付加されたとき span を白背景する。

蛇足

ちなみに、

header.classList.toggle("bg-is-white", window.scrollY > 1);

は、下記と同じ意味になる、ということを今回初めて知った。

 if (window.scrollY > 1) {
      header.classList.add(whiteClass)
  } else {
      header.classList.remove(whiteClass)
  }

JavaScriptのclassList.toggleは第2引数に条件文を入れられる | iwb.jp

Answer 2

const whiteClass = "bg-is-white";
window.addEventListener("scroll", function() {
  // ヘッダーを変数の中に格納する
  const headers = document.querySelectorAll(".menu-trigger span");
  if (window.scrollY > 1) {
    for (const header of headers) {
      header.classList.add(whiteClass)
    }
  } else {
    for (const header of headers) {
      header.classList.remove(whiteClass)
    }
  }
});

Answer 3

        .bg-is-white .menu-trigger span {
            background-color: #fff;
        }

となっていますので、.bg-is-whiteは.menu-triggerの親要素でなければCSSが効かないと思いますが、JavaScriptではそうはなっていないようです。
CSSを実際のHTMLに合わせて正しく書く必要があるでしょう。

また、document.querySelector(".menu-trigger span")のドット付け忘れや、document.querySelectorAllを使っていないので一つ目のspanにしかクラスがついていない問題などについても解決する必要があるでしょう。

おそらく、.bg-is-whiteを親の要素につけた方が楽だと思います。

Comments

[yukishiomi]

ご回答ありがとうございます。元々のハンバーガーメニューの黒色が子要素にて指定されているため、bg-is-whiteを親要素につけてもハンバーガーメニューの色は変わらないと思ったので、子要素につけていました。