JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<nav>
  NAV
</nav>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

CSS

body {
  margin: 0;
  padding: 0;
}

section {
  background: blue;
  height: 100vh;
  border-bottom: 1px solid white;
}

section:first-of-type {
  background: red;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  background: green;
  width: 100%;
}

nav.past-first-section {
  background: black;
  color: white;
}

JavaScript

$(function() {
	var sectionEndOffset = $('section:first-of-type').height() - $('section:first-of-type').offset().top;
  
  $(window).scroll(function() {
  	var scrollOffset = $(window).scrollTop();
    
    if (scrollOffset > sectionEndOffset) {
    	$('nav').addClass('past-first-section');
    } else {
    	$('nav').removeClass('past-first-section');
    }
  });
});