スクロールした際に、ハンバーガーメニューの色を変えたい。

Question

今現在、スライドするとスティッキーヘッダーが出てきて、ロゴ画像が変わる状態なんですけど、ハンバーガーメニューだけが、色の変え方が分からなくて困っています。わかる方がいらっしゃいましたら、ご教示お願いします。

<header class="header">
    <div class="header-inner">
      <div class="header-logo js-header">
        <a href="index.html"><img src="img/logo-w.svg" alt="" 
        class="header-logo js-header -before"/></a>
        <a href="index.html"><img src="img/logo-b.svg"
        alt="" class="header-logo js-header -after"/></a>
      </div>
      <nav class="header-nav">
        <ul class="nav-list">
          <li class="nav-items">
            <p class="nav-items-ja">トップ</p>
            <p class="nav-items-en">TOP</p>
          </li>
          <li class="nav-items">
            <p class="nav-items-ja">事業内容</p>
            <p class="nav-items-en">SERVICES</p>
          </li>
          <li class="nav-items">
            <p class="nav-items-ja">園崎組について</p>
            <p class="nav-items-en">ABOUT</p>
          </li>
          <li class="nav-items">
            <p class="nav-items-ja">園崎組の実績</p>
            <p class="nav-items-en">WORKS</p>
          </li>
          <li class="nav-items">
            <p class="nav-items-ja">採用情報</p>
            <p class="nav-items-en">RECRUIT</p>
          </li>
          <li class="nav-items">
            <p class="nav-items-ja">お問い合わせ</p>
            <p class="nav-items-en">CONTACT</p>
          </li>
        </ul>
      </nav>
    </div>
    <button class="burger-btn">
      <span class="bar bar-top"></span>
      <span class="bar bar-mid"></span>
      <span class="bar bar-bottom"></span>
    </button>
  </header>

@media screen and (max-width: 820px){

.header-logo{
  padding: 15px 10px 10px;
}
.header-logo img{
  padding: 0;
}
.slide-img img{
  object-position: 25%;
}
.header-nav{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #4462a7;
}
.nav-list {
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  z-index: 9999;
}
.nav-items {
  margin: 0 0 50px;
}
.burger-btn {
  display: block;
  position: absolute;
  top: 15px;
  right: 4vw;
  z-index: 9999;
}
.burger-btn .bar {
  display: block;
  height: 3px;
  width: 30px;
  background-color: #FFFFFF;
  /* background-color: #191919; */
  transition: .3s;
}

.bar-top,
.bar-mid {
  margin-bottom: 8px;
}
.burger-btn.cross .bar-top{
  transform: rotate(45deg) translate(8px,8px);
  transition: .3s;
}
.burger-btn.cross .bar-mid{
  opacity: 0;
  transition: .3s;
}
.burger-btn.cross .bar-bottom{
  transform: rotate(-45deg) translate(8px,-8px);
  transition: .3s;
}
body.noscroll {
  overflow: hidden;
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
.button{
  height: 50px;
  width: 120px;
  margin-right: 15%;
}
.nav-items::after{
  display: none;
}
}

// スティッキーヘッダー
$(function(){
  var $win = $(window),
      $fv = $('.fv'),
      $header = $('.header'),
      fvHeight = $fv.outerHeight();
      fixedClass = 'fixed';
 
     $win.on('load scroll',function(){
      var value = $(this).scrollTop();
      if($win.width() > 80){
        if( value > fvHeight){
          $header.addClass(fixedClass);
        }else{
          $header.removeClass(fixedClass);
        }
      }
     });
    });

    // スクロールするとロゴ画像変更
$(function () {
  $(window).on("scroll", function () {
    const sliderHeight = $(".header").height();
    if (sliderHeight - 30 < $(this).scrollTop()) {
      $(".js-header").addClass("headerLogoScroll");
    } else {
      $(".js-header").removeClass("headerLogoScroll");
    }
  });
});