JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header">
  <nav id="navigation-bar">NAVBAR</nav>
</header>
<section>HTML</section>

CSS

body {
  background: #000;
  margin: 0;
}
section {
  height: 1000px;
  background: #ccc;
}
nav {
  background: #fff;
  padding: 30px;
}
nav.navbar-fixed-top {
  width: 100%;
  position: fixed;
  top: 0;
  opacity: 0;
  animation: navbar .5s linear forwards;
}
@keyframes navbar {
  100% { opacity: 1; }
}

JavaScript

$(document).ready(function(){
  
  var clientHeight = document.getElementById('header').clientHeight;
  $(window).scroll(function(){
    if ($(this).scrollTop() > clientHeight) {
      $('#navigation-bar').addClass('navbar-fixed-top');
    } else {
      $('#navigation-bar').removeClass('navbar-fixed-top');  
    }
  });

});