JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<section id="container">
  <header>hello, world!</header>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
</section>

CSS

body {
  padding: 0;
  margin: 0;
  font: 1em Arial, Helvetica, Sans-serif;
}
section {
  position: relative;
  background: linear-gradient(#69F,#F96);
  padding: 0 1em;
}
header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color: lime;
  padding: 2em 1em;
}
.scrolled header {
	padding: 1em;
}

JavaScript

gsap.registerPlugin(ScrollTrigger);
var pageHeader = $('section > header'),
  anim_header = gsap.timeline({
    scrollTrigger: {
      trigger: $('body'),
      scrub: true,
      markers: true,
			id: 'headerFade',
      start: 'top top',
      end: '+=' + pageHeader.outerHeight() * 1.75 + 'px'
    }
  }),
	header_fade = ScrollTrigger.getById('headerFade');
	ScrollTrigger.create({
		trigger: $('body'),
		start: 'top top',
		end: '+=' + pageHeader.outerHeight() * 1.75 + 'px',
		onLeave: function() {
			header_fade.disable();
			$('html').addClass('scrolled');
		},
		onEnterBack: function() {
			header_fade.enable();
			$('html').removeClass('scrolled');
		}
	});
anim_header
	.to(pageHeader, {
		opacity: 0,
		padding: '1em'
	});