Toggle Element Colour Based on Background Colour in JS

Question

I've written some JavaScript code that almost works the way I want it to, but I need some help figuring out how to make it work the way I need it to.

I want to change the colour of a fixed navigation element (hamburger) when it encounters a section with the class of white.Right now this is accomplished by adding a class of darker to that nav element.

What I can't figure out is how to have the darker class removed when I scroll past an element that no longer has the class of white. Any help is much appreciated!

Thanks in advance! :)

Code pen demo

The code is as follows: (Maybe not showing as expected here in SO, better in Codepen)

$(document).ready(function(){
  $('#hamburger').click(function(){
    $(this).toggleClass('open');
  });
});

$(document).ready(function () {
    var change = $('.change');

    $(window).scroll(function () {
        var y = $(this).scrollTop();
        var z = $('.white').offset().top;

        if (y >= z) {
            change.addClass('darker');
        }
        else {
            change.removeClass('darker');
        }
    });
});

//Variables
    $grey-darker: hsl(0, 0%, 21%);
    $grey: hsl(0, 0%, 48%);
    $white: hsl(0, 0%, 100%);
    
    $bold: 900;
    
    //Formatting
    
    * {
    	margin: 0;
    	padding: 0;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    
    body {
      font-family: sans-serif;
      letter-spacing: -1.5px;
    }
    
    h1 {
      color: $white;
      font-size: 7em;
      font-weight: $bold;
    }
    
    //Navigation/
    .navigation {
      display:flex;
      vertical-align:top;
      width: 100%;
      height: 76px;
      position: fixed;
    }
    
    //Hamburger --> This should change from white & blue depending on background color
    
    #hamburger {
      width: 30px;
      height: 20px;
      margin-left: auto;
      align-self: center;
      margin-right: 30px;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out, ;
      transition-delay: background 0.4s;
      cursor: pointer;
      z-index: 5;
    }
    
    #hamburger span {
      display: block;
      position: absolute;
      height: 3px;
      width: 100%;
      background: $white;
      border-radius: 9px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out, ;
      transition-delay: background 0.4s;
    }
    
    #hamburger span.change.darker{
      background: Blue;
    }
    
    #hamburger span:nth-child(1) {
      top: 0px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #hamburger span:nth-child(2) {
      top: 6px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #hamburger span:nth-child(3) {
      top: 12px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    
    #hamburger.open span:nth-child(1) {
      background:white;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      top: 0px;
      left: 5px;
    }
    
    #hamburger.open span:nth-child(2) {
      width: 0%;
      opacity: 0;
    }
    
    #hamburger.open span:nth-child(3) {
      background:white;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 22px;
      left: 5px;
    }
    
    //Main
    
    .container-fullpage {
      display: flex;
      flex-direction: row;
      flex-flow: row wrap;
      align-items: center;
      justify-content: space-around;
      height: 100vh;
      width: 100vw;
    }
    
    .sectionOne {
      background: blue;
    }
    .sectionTwo{
      color: blue;
      background: $white;
    }
    .sectionTwo h1 {
      color: blue;
    }
    .sectionThree{
      background: blue;
    }
    .sectionFour{
      background: $white;
    }
    .sectionFour h1 {
      color: blue;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<nav class="navigation">
  <div class="hamburger" id="hamburger">
  <span class="change"></span>
  <span class="change"></span>
  <span class="change"></span>
</div>
</nav>
</header>
<main>
  <div class="container-fullpage sectionOne">
    <h1 class="home">First Section</h1>
  </div>
  <div class="container-fullpage sectionTwo white">
    <h1>Second Section</h1>
  </div>
  <div class="container-fullpage sectionThree">
    <h1>Third Section</h1>
  </div>
  <div class="container-fullpage sectionFour white">
    <h1>Fourth Section</h1>
  </div>
</main>

Answer 1

I think this is the javascript code that will do what you want:

$(document).ready(function(){
    $('#hamburger').click(function(){
        $(this).toggleClass('open');
    });
});

$(document).ready(function () {
    var change = $('.change');

    $(window).scroll(function () {
        var top1 = change.offset().top;
        var bottom1 = change.offset().top + change.outerHeight(true);
        var overlapsWhite = false;
        $('.white').each(function() {
            var top2 = $(this).offset().top;
            var bottom2 = $(this).offset().top + $(this).outerHeight(true);

            if (top1 >= top2 && bottom2 >= bottom1){
                overlapsWhite = true;
                return false;
            }
        });

        if (overlapsWhite) {
            change.addClass('darker');
        }
        else {
            change.removeClass('darker');
        }
    });
});

Check on Code pen