JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
  <div id="nav_ham" onclick="openNav()">
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
    <span class=""></span></div>
</div>
<div class="section_black">
  BLACK
</div>
<div class="section_white">
  WHITE
</div>
<div class="section_black">
  BLACK
</div>
<div class="section_white">
  WHITE
</div>
<div class="section_black">
  BLACK
</div>
<div class="section_black">
  BLACK
</div>

CSS

.nav {
  position: fixed;
  height: 10px;
}

.section_black {
  background: black;
  height: 300px;
}

.section_white {
  background: white;
  height: 300px;
}

.ham_dark { background: black!important; }

#nav_ham {
  width: 30px;
  height: 30px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav_ham span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 1px;
  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;
}

#nav_ham span:nth-child(1) {
  top: 0px;
}

#nav_ham span:nth-child(2),
#nav_ham span:nth-child(3) {
  top: 8px;
}

#nav_ham span:nth-child(4) {
  top: 16px;
}

#nav_ham.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav_ham.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav_ham.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav_ham.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

JavaScript

//CHANGES COLOR OF NAV ON WHITE SECTIONS
function onScreen() {
  // Check if the top of the page collides with each section
  $('.section_white').each(function() {
    var windowScroll = $(document).scrollTop();
    var navHeight = $('.nav').height();

    // Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
    if (windowScroll + navHeight >= $(this).offset().top && windowScroll + navHeight <= $(this).offset().top + $(this).height()) {
      // This section is active! Add Highlight
      console.log('working');
      $('.cls-1').attr('class', 'cls-1 logo_dark');
      $('#nav_ham span').addClass('ham_dark')
    } else {
      // No - Remove highlight class
      $('.cls-1').attr('class', 'cls-1');
      $('#nav_ham span').removeClass('ham_dark')
    }

  });
}

$(window).on('scroll resize', function () {
    onScreen();
});