JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
  <div class="container">
    <div class="content">
      <h1>Help, please</h1>
    </div>
  </div>
</header>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  height: 10000px;
}
.header {
  padding: 15px 0;
  background: #cccccc;
  top: -200px;
  transition: all 0.2s ease;
}
.header-fixed {
  position: fixed;
  width: 100%;
  top: 0;
}

JavaScript

var header = document.querySelector('.header');

window.onscroll = function () {
  if (window.scrollY > 50) {
    header.classList.add('header-fixed');
  } else {
    header.classList.remove('header-fixed');
  };
};