JSFiddle - React, Tailwind, and code Playground

HTML

<body style="zoom: 1;" screen_capture_injected="true" cz-shortcut-listen="true" class=" hasGoogleVoiceExt"><div class="menu">Menu</div>
<div class="hero-unit">
      <div class="container">

  <h1 class="fade">Fading text</h1>
  <p class="text fade">Fading text.</p>
  <p><a style="opacity: 1;" class="btn btn-primary btn-large fade">Learn more »</a></p></div>
</div>
<div id="wrapper">
wrapper
</div>





<div id="directions_extension" style="display: none;"></div></body>

CSS

.menu{
 width:100%;
 height:40px;
position:fixed;
left:0;
top:0;
background-color:black;
}
.hero-unit {
  padding: 60px;

  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  color: inherit;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-attachment:fixed;
}
.hero-unit h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  color: inherit;
  letter-spacing: -1px;
}
#wrapper{
	height:1500px;
	width:100%;
		background-color:#ccc;
}
.fade{
    position: relative;
}
}

JavaScript

$(window).scroll(function(){
    var top = ($(window).scrollTop() > 0) ? $(window).scrollTop() : 1;
    $('.fade').stop(true, true).fadeTo(1000, 1 / top);
    $('.fade').css('top', top * 1.3);             
});