JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu"></div>
<div class="secao_1">
  
</div>
<div class="secao_2">
  
</div>

CSS

.secao_1 {
  width: 100vw;
  height: 100vh;
  background: black;
}
.secao_2 {
  width: 100vw;
  height: 100vh;
  background: gray;
}

#menu {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 150px;
  height: 200px;
  background: white;
}
.vermelho {
  background: red !important;
}

JavaScript

$(document).ready(function() {
	var $windowHeight = $(window).height();

	$(window).scroll(function() {
  	if ( $(document).scrollTop() > $windowHeight ) {
    	$('#menu').addClass('vermelho');
    } else {
    	$('#menu').removeClass('vermelho');
    }
  });
});