JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
 <p class="js_header white">
   Text
 </p>
</nav>

<section class="bg-black"></section>
<section class="bg-white"></section>

CSS

html, body { 
  margin: 0;
  padding: 0;
}

nav { 
  width: 100%;
  height: 40px;
  position: fixed;
  background-color: rgba(0,0,0,0.20);
  padding: 10px 20px;
}

nav .white { 
  color: white;
}

nav .black { 
  color: black;
}

section { 
  width: 100%;
  height: 100vh;
}

section.bg-black {
  background-color: black;
}

section.bg-white {
  background-color: white;
}

JavaScript

$(document).scroll(function (e) {
	$.each($('section'), function (index, section) {
  	if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
			if ($(section).hasClass('bg-black')) {
				$('.js_header').removeClass('black');      
        $('.js_header').addClass('white');      
      } else {
        $('.js_header').removeClass('white');      
        $('.js_header').addClass('black');
      }
    }
  });
});