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

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

HTML
1<header class="header">
2    <div class="header-inner">
3      <div class="header-logo js-header">
4        <a href="index.html"><img src="img/logo-w.svg" alt="" 
5        class="header-logo js-header -before"/></a>
6        <a href="index.html"><img src="img/logo-b.svg"
7        alt="" class="header-logo js-header -after"/></a>
8      </div>
9      <nav class="header-nav">
10        <ul class="nav-list">
11          <li class="nav-items">
12            <p class="nav-items-ja">トップ</p>
13            <p class="nav-items-en">TOP</p>
14          </li>
15          <li class="nav-items">
16            <p class="nav-items-ja">事業内容</p>
17            <p class="nav-items-en">SERVICES</p>
18          </li>
19          <li class="nav-items">
20            <p class="nav-items-ja">園崎組について</p>
21            <p class="nav-items-en">ABOUT</p>
22          </li>
23          <li class="nav-items">
24            <p class="nav-items-ja">園崎組の実績</p>
25            <p class="nav-items-en">WORKS</p>
26          </li>
27          <li class="nav-items">
28            <p class="nav-items-ja">採用情報</p>
29            <p class="nav-items-en">RECRUIT</p>
30          </li>
31          <li class="nav-items">
32            <p class="nav-items-ja">お問い合わせ</p>
33            <p class="nav-items-en">CONTACT</p>
34          </li>
35        </ul>
36      </nav>
37    </div>
38    <button class="burger-btn">
39      <span class="bar bar-top"></span>
40      <span class="bar bar-mid"></span>
41      <span class="bar bar-bottom"></span>
42    </button>
43  </header>

css
1@media screen and (max-width: 820px){
2
3.header-logo{
4  padding: 15px 10px 10px;
5}
6.header-logo img{
7  padding: 0;
8}
9.slide-img img{
10  object-position: 25%;
11}
12.header-nav{
13  display: none;
14  position: fixed;
15  top: 0;
16  left: 0;
17  width: 100%;
18  height: 100vh;
19  background: #4462a7;
20}
21.nav-list {
22  height: 100%;
23  flex-direction: column;
24  justify-content: center;
25  align-items: center;
26  padding: 0;
27  z-index: 9999;
28}
29.nav-items {
30  margin: 0 0 50px;
31}
32.burger-btn {
33  display: block;
34  position: absolute;
35  top: 15px;
36  right: 4vw;
37  z-index: 9999;
38}
39.burger-btn .bar {
40  display: block;
41  height: 3px;
42  width: 30px;
43  background-color: #FFFFFF;
44  /* background-color: #191919; */
45  transition: .3s;
46}
47
48.bar-top,
49.bar-mid {
50  margin-bottom: 8px;
51}
52.burger-btn.cross .bar-top{
53  transform: rotate(45deg) translate(8px,8px);
54  transition: .3s;
55}
56.burger-btn.cross .bar-mid{
57  opacity: 0;
58  transition: .3s;
59}
60.burger-btn.cross .bar-bottom{
61  transform: rotate(-45deg) translate(8px,-8px);
62  transition: .3s;
63}
64body.noscroll {
65  overflow: hidden;
66}
67button {
68  background-color: transparent;
69  border: none;
70  cursor: pointer;
71  outline: none;
72  padding: 0;
73  appearance: none;
74}
75.button{
76  height: 50px;
77  width: 120px;
78  margin-right: 15%;
79}
80.nav-items::after{
81  display: none;
82}
83}

query
1// スティッキーヘッダー
2$(function(){
3  var $win = $(window),
4      $fv = $('.fv'),
5      $header = $('.header'),
6      fvHeight = $fv.outerHeight();
7      fixedClass = 'fixed';
8 
9     $win.on('load scroll',function(){
10      var value = $(this).scrollTop();
11      if($win.width() > 80){
12        if( value > fvHeight){
13          $header.addClass(fixedClass);
14        }else{
15          $header.removeClass(fixedClass);
16        }
17      }
18     });
19    });
20
21    // スクロールするとロゴ画像変更
22$(function () {
23  $(window).on("scroll", function () {
24    const sliderHeight = $(".header").height();
25    if (sliderHeight - 30 < $(this).scrollTop()) {
26      $(".js-header").addClass("headerLogoScroll");
27    } else {
28      $(".js-header").removeClass("headerLogoScroll");
29    }
30  });
31});