JSFiddle - React, Tailwind, and code Playground

by Victor Alekseev

HTML

<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<div id="top">Меню</div>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>
<p>text</p><br>

CSS

.menu{
  position:fixed;
  top:0px;
}
#top{
  width: 400px;
  height: 30px;
  background-color: #e74c3c;
  text-align: center;
  color: white;
  line-height: 30px;
}

JavaScript

$(document).ready(function() {
var start_pos=$('#top').offset().top;
 $(window).scroll(function(){
  if ($(window).scrollTop()>=start_pos) {
      if ($('#top').hasClass()==false) $('#top').addClass('menu');
  }
  else $('#top').removeClass('menu');
 });
});