JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:100px;width:100%;">

</div>
<div class="menu" style="background:blue;padding:10px;">
</div>
<div style="height:5000px;width:100%;">

</div>

CSS

.menu{
  width:100%;
  color:white;
}

JavaScript

$(window).on('scroll', function() {
  var ell = $('.menu').offset().top;
  var ill = $(document).scrollTop();
  $(".menu").html("Distância Menu: "+ell+"     |    Distância Scroll: "+ill);
  if(ell < ill ) {
      $('.menu').css("position", "fixed");
      $('.menu').css("top", "0");
  }else{
    $('.menu').css("position", "initial");
    $('.menu').css("top", "initial");
  }
});