JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay">
My Text, should fadeout on scroll
</div>
<div class="shit">Bla-bla-blah</div>
<div class="shit">Bla-bla-blah</div>
<div class="shit">Bla-bla-blah</div>
<div class="shit">Bla-bla-blah</div>
<div class="shit">Bla-bla-blah</div>
<div class="shit">Bla-bla-blah</div>
<div class="shit">Bla-bla-blah</div>
<div class="shit">Bla-bla-blah</div>
<div class="shit">Bla-bla-blah</div>

CSS

#overlay {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  height: 10vh;
  background-color: blue;
  width: 100%;
}

.shit {
  font-size: 130px;
  color: gray;
}

JavaScript

// слушаем прокрутку
window.addEventListener('scroll', () => {
  // перерисовываем тогда, когда у нас есть на это время
	window.requestAnimationFrame(() => {
		  document.getElementById('overlay').style.opacity = 
			  1 - document.documentElement.scrollTop / 					 document.documentElement.scrollTopMax;
  
  });

})