JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
link
</nav>

<div id="element1">
</div>

<div id="element2">
</div>

<div id="element3">
</div>

CSS

.wrapper {
  height: 100px;
}

nav {
  position: fixed;
  width: 100%;
  color: white;
  text-align: center;
 }

#element1 {
  height: 50vh;
  background-color: gray;
}

#element2 {
  height: 20vh;
  background-color: white;
}

#element3 {
  height: 100vh;
  background-color: black;
}

.active {
  color:black;
}

JavaScript

$(document).ready(function() {
$(window).scroll(function() {
   var element1height = $( "#element1" ).height(); 
   var element2height = $( "#element2" ).height();
   var total = element1height + element2height;
   var st = $(this).scrollTop();
   if( st > element1height ) {
   $("nav").addClass("active"); 
   } 
   else {
   $("nav").removeClass("active"); 
   }
   if( st > total ) {
   $("nav").removeClass("active"); 
   } 
  }); 
 });