JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
  
  
  
  </div>
  
  <section class="full-height background-overlay" >
			
			

			
			
			
	</section>
  	<div class="page">
  
  
  
  </div>

CSS

.full-height, .page {
  height:500px;
}

.black {
  background: #000000; 
	transition: background-color 1s ease;
}

JavaScript

$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= $('.background-overlay').offset().top) { // check the offset top
		$( ".background-overlay" ).addClass( "black" );
		
    } else if(scroll >= $('.background-overlay').offset().top+$('.background-overlay').height()){ // check the scrollHeight
		$( ".background-overlay" ).removeClass( "black" );
    }
  });
});