Изменить цвет меню бургера на свитке

Question

Я пытаюсь изменить цвет моего бургерного меню при прокрутке определенных объектов на странице.

Я использую 3 элемента диапазона, чтобы создать гамбургер.

Любая идея о том, как я могу сделать это, используя Scrollmagi c или JS или jQuery?

Ваша помощь будет принята с благодарностью. Пожалуйста, спросите, если вам нужно больше информации. Если бы вы могли положить его в скрипку или кодовую ручку, это было бы невероятно.

Здесь была моя последняя попытка. Я пробовал другие, потому что мой JS ограничен, так как я новичок в этом и учусь.

https://jsfiddle.net/g83bxduv/2/

$(function() {
    var burger = $(".blue");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
    
        if (scroll >= 200) {
            burger.removeClass('blue').addClass("white");
        } else {
            header.removeClass("white").addClass('blue');
        }
    });
});

body {
  height:10000px
}


.navbar-collapse {
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 100vw;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-bottom: 50px;
}

.navbar-toggler {
    float: right;
    padding: 20px 7.5vw 30px 20px;
}

#menuToggle {
    display: block;
    position: fixed;
    top: 50%;
    left: 7.5vw;
    z-index: 999;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a {
    text-decoration: none;
    color: #475D7B;
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: #2abd9a;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}

.blue {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #475D7B;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

.white {
    background: white;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #475D7B;
}

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
    position: absolute;
    width: 180px;
    margin: -250px 0 0 -7.5vw;
    padding: 50px;
    padding-left: 280px;
    background: white;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
    padding: 10px 0;
    font-size: 20px;
}

#menuToggle input:checked~ul {
    transform: none;
}

<div role="navigation">
  <div id="menuToggle">

    <input type="checkbox" />
    <span class="blue"></span>
    <span class="blue"></span>
    <span class="blue"></span>
    

    <ul id="menu">
      <a href="portfolio"><li>Home</li></a>
      <a href="portfolio"><li>Case studies</li></a>
      <a href="expertise"><li>Design services</li></a>
      <a href="about"><li>Meet the team</li></a>
      <a href="testimonials"><li>Testimonials</li></a>
      <a href="intellectual-property"><li>Intellectual Property</li></a>
      <a href="contact"><li>Contact us</li></a>
      <a href="news"><li>News</li></a>
    </ul>
  </div>
</div>