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 pageHeader = $('section > header'),
  anim_header = gsap.timeline({
    scrollTrigger: {
      trigger: $('body'),
      scrub: true,
      markers: true,
      start: 'top top',
      end: '+=' + pageHeader.outerHeight() * 1.75 + 'px'
    }
  }),
  fadeHeader = gsap.to(pageHeader, {
    opacity: 0
  }),
  toggleButton = $('<a/>', {
    'class': 'toggle',
    text: 'click me',
    click: function() {
      if (!$('section').hasClass('active')) {
        anim_header.reverse().then(function() {
          $('section').addClass('active');
        });
      } else {
        anim_header.play();
        $('section').removeClass('active');
      }
    }
  });
pageHeader.after(toggleButton);
anim_header.add(fadeHeader);