JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text">Random text</div>
<div class="text">Random text</div>
<div id="header">My header</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>
<div class="text">Random text</div>

CSS

.text{
    display:block;
    width:100%;
    padding: 40px 0;
}

#header{
    display:block;
    width: 100%;
    height:50px;
    background: #ddff00;
}
#header.fixed{
    position:fixed;
    top: 0;
    z-index: 999;
}

JavaScript

//by default, the static menu is hidden
  var showStaticMenuBar = false;

  //when scrolling...
  $(window).scroll(function () {

      //if the static menu is not yet visible...
      if (showStaticMenuBar == false) {
          //if I scroll more than 200px, I show it 
          if ($(window).scrollTop() >= 200) {
              //showing the static menu
              $('#header').addClass('fixed');

              showStaticMenuBar = true;

          }

      }
      //if the static menu is already visible...
      else {
          if ($(window).scrollTop() < 200) {
              $('#header').removeClass('fixed');

              //I define it as hidden
              showStaticMenuBar = false;
          }
      }
  });