JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="nav-icon2">
  <h2>
    title
  </h2>
</div>
<div class="nav-icon3"></div>

CSS

.nav-icon2 {height: 500px; width: 100%; background: #333;}
.nav-icon3 {height: 500px; width: 100%; background: blue;}

h2 { position: fixed; color: #fff; top: 50px; left: 50%; margin-left: -50px; text-align: center; font-size: 50px; }

JavaScript

$(window).scroll(function(){
	if($(window).scrollTop() > 350){
  	$("h2").css('color','#f00');
  }else{
 	 	$("h2").css('color','#fff');
  }
});