JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<header class="menu">
  <div>
  13
  </div>
</header>
<div class="wrapper">
  </div>

CSS

.menu{
  width:100%;
  height:50px;
  background:blue;
}
.fix{
  position:fixed;
  top:0;
}

.wrapper{
  height:1000px
}

JavaScript

var menu = $(".menu");
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    if ( top >= 100 ) {
      menu.addClass('fix');
    } else if ( top <= 200 ) {
      menu.removeClass('fix');
    }
  });