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;
}
section.active {
  background: linear-gradient(#F96,#69F);
}
header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color: lime;
  padding: 2em 1em;
}
.toggle {
  position: fixed;
  top: 1em;
  right: 1em;
  background: red;
  width: 3em;
  height: 3em;
  cursor: pointer;
  text-align: center;
  color: white;
}

JavaScript

gsap.registerPlugin(ScrollTrigger);
var state = 'open';
var pageHeader = $('section > header'),
  anim_header = gsap.timeline({
    scrollTrigger: {
      trigger: 'body',
      markers: true,
      start: 'top top',
      end: '+=' + pageHeader.outerHeight() * 1.75 + 'px',
      onLeave: () => {
      	state = 'closed';
        gsap.to(pageHeader, { opacity: 0 });
      },
      onEnterBack: () => {
      	state = 'open';
        gsap.to(pageHeader, { opacity: 1 });
      }
    }
  }),
  toggleButton = $('<button/>', {
    'class': 'toggle',
    text: 'click me',
    click: function() {
      if(state === 'closed') {
      	state = 'open';
        gsap.to(pageHeader, { opacity: 1 });
      } else {
      	state = 'closed';
        gsap.to(pageHeader, { opacity: 0 });
      }
    }
  });
pageHeader.after(toggleButton);