JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div style="width:100%;height:2500px;background-color:black">
 <div class="NavigationButton menu_white">
    MENU
  </div>
  
  <div class='white_div' style="background-color:white;width:100%;height:200px;position:relative;top:50px">
  
  </div>
  <span>d</span>
    <div class='white_div' style="background-color:white;width:100%;height:200px;position:relative;top:50px">
  
  </div>

</div>

CSS

.NavigationButton {
 position: fixed;
 top: 5%;
 right: 5%;
 z-index: 99999;
 font-family: neuzeit-grotesk, sans-serif;
 font-weight: 700;
 color: inherit;
}

.menu_white {
 color: #fff;
}

.menu_black {
 color: #000;
}

JavaScript

$(document).ready(function(){
	$(window).scroll(function(){
  	var light_pos = $('.white_div').offset().top;
    var light_height = $('.white_div').height();
    var menu_pos = $('.NavigationButton').offset().top;
    var menu_height = $('.NavigationButton').height();
    var scroll = $(window).scrollTop();
    console.log('light',light_pos);
    console.log('menu',menu_pos);
    console.log('scroll',scroll);
    
    if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
    	$('.NavigationButton').addClass('menu_black');
      $('.NavigationButton').removeClass('menu_white');
    }
    else {
    	$('.NavigationButton').removeClass('menu_black');
      $('.NavigationButton').addClass('menu_white');
    }
    
  })
})