JSFiddle - React, Tailwind, and code Playground

HTML

<title></title>
  <header class = "mainHeader">
    Header
  </header>
  <nav class = "navigation">
    Navigation
  </nav>
  <body style = "font-size: 30px; text-align: center; font-family: Helvetica">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis mauris, suscipit sit amet dui vel, interdum pretium nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque eu neque in ante pellentesque porta quis ac nisl. Integer ut varius sem. Mauris ultricies, magna eu interdum efficitur, nibh mauris congue quam, ac congue leo diam nec ligula. Phasellus rhoncus sodales tortor, eu posuere odio congue sed. In porttitor ultrices tortor, vitae venenatis massa tincidunt sed. Phasellus vulputate ut odio nec scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut accumsan leo et elit porta fermentum. Ut eu fringilla odio, quis mattis metus. Morbi id metus risus. Fusce pharetra lobortis lobortis. Mauris porttitor eget risus vitae ornare.

Morbi consequat tempor enim, vitae sagittis lectus sagittis sit amet. Sed quis velit maximus ex congue tincidunt. Nulla gravida massa elit, id pellentesque arcu aliquet at. Aenean feugiat volutpat neque sed porttitor. Aenean ac enim facilisis, volutpat ligula id, feugiat sapien. Nunc ut venenatis elit. Suspendisse sed malesuada orci. Fusce lobortis urna ut eros auctor, sit amet volutpat magna pellentesque. Sed sollicitudin sem in tempor molestie. Nulla et libero a magna tincidunt sollicitudin. Morbi sed lectus elit. Pellentesque a tellus velit. Sed quis urna ligula.

Cras consequat, purus vitae hendrerit tristique, diam nulla hendrerit risus, non porta dui leo a nulla. Aliquam sed lectus egestas, accumsan mauris vel, fermentum ex. Phasellus massa arcu, bibendum sed tincidunt id, tempor commodo velit. Duis in tortor pulvinar, imperdiet erat sit amet, ullamcorper massa. Quisque eleifend posuere dignissim. Quisque gravida, mi id tempor consectetur, lorem justo...

CSS

* {
  margin: 0;
  box-sizing: border-box;
}

.mainHeader {
  width: 100%;
  height: 20%;
  background-color: rgb(62, 65, 66);
  text-align: center;
  font-family: "Helvetica Nue";
}

.navigation {
  width 100%;
  height 10%;
  background-color: rgb(89, 127, 143);
  position: relative;
}

.sticky {
  position: fixed;
}

JavaScript

var navTop = $("nav").offset().top;

var stickyNav = function(){
  if ($(window).scrollTop() >= navTop){
    $("nav").addClass("sticky");
  } else {
    $("nav").removeClass("sticky");
  }
};

stickyNav();

$(window).scroll(function(){
	stickyNav();
});