JSFiddle - React, Tailwind, and code Playground

HTML

<div class='nice-header'>
  <div class='header-overlay'>
    
  </div>
</div>
<div class='dummy'>

</div>

CSS

.nice-header {
  
  position: relative;
  height: 300px;
  background: center center;
  background-size: cover;
  background-image: url(http://www.boeing.com/resources/boeingdotcom/commercial/787/assets/images/marquee-787.jpg);
  
}

.header-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgb(0,0,0);
  opacity: 0.2;
}

.dummy {
  height: 900px;
}

JavaScript

$(window).scroll(function() {

	$('.header-overlay').css({
  	opacity: function() {
    	var opacity = 0; 
      //TODO:
      //Set opacity to a higer value whilst user scrolls
    	return opacity;
    }
  });

});