JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <h3 class="headline">navigation links</h3>
</nav>
<section class="section1">
  section 1
</section>
<section class="section2">
  section 2
</section>
<section class="section3">
  section 3
</section>

CSS

body {
  margin: 0px;
  padding: 0px;
}

nav {
  width: 100%;
  position: fixed;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.light-mode {
  color: #fff;
}

.section1 {
  width: 100%;
  height: 400px;
  background-color: #fff;
  color: #000;
  padding: 100px;
}

.section2 {
  width: 100%;
  height: 400px;
  background-color: #000;
  color: #fff;
  padding: 100px;
}

.section3 {
  width: 100%;
  height: 400px;
  background-color: #fff;
  color: #000;
  padding: 100px;
}

JavaScript

var initialTopOffset = $('.headline').offset().top;
$(window).scroll(function(event) {
  var scroll = $(window).scrollTop();
  // if the top of our browser is inside the section2
  if (scroll + initialTopOffset >= $('.section2').offset().top && scroll + initialTopOffset <= $('.section2').offset().top + $('.section2').outerHeight()) {
    $('nav').addClass('light-mode'); // add the class
  } else {
    $('nav').removeClass('light-mode'); // remove the class
  }
});

//trigger the scroll
$(window).scroll(); //ensure if you're in current position when page is refreshed