JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus repellat, commodi, deleniti suscipit id error voluptatibus cumque? Sit fugiat illum perferendis ducimus dolores odit, quos in. Sapiente, labore, voluptates. Explicabo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius voluptas repellat delectus dignissimos dolorem, accusantium maiores omnis voluptatibus repellendus nobis suscipit nemo facilis culpa numquam quas, aliquam nesciunt iusto. Laudantium!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti facere amet inventore ipsum, nulla delectus voluptatibus at sunt quasi dicta deleniti, fugiat magnam vitae ipsa illo repudiandae architecto odio laboriosam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus repellat, commodi, deleniti suscipit id error voluptatibus cumque? Sit fugiat illum perferendis ducimus dolores odit, quos in. Sapiente, labore, voluptates. Explicabo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius voluptas repellat delectus dignissimos dolorem, accusantium maiores omnis voluptatibus repellendus nobis suscipit nemo facilis culpa numquam quas, aliquam nesciunt iusto. Laudantium!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti facere amet inventore ipsum, nulla delectus voluptatibus at sunt quasi dicta deleniti, fugiat magnam vitae ipsa illo repudiandae architecto odio laboriosam.</p><div id="elem">МЕНЮ</div>

CSS

#elem{
display:none;
position:fixed;
left:0px;
top:0px;
height:50px;
width:100%;
background:black;
color:white;
font-size:25px;
text-align:center;
}

JavaScript

var $window = $(window)
var isShow = false;
var $elem = $('#elem');
$window.scroll(function() {
  if ($window.scrollTop() > 50) {
    if (!isShow) {
      $elem.show();
      isShow = true;
    }
  } else {
    if (isShow) {
      $elem.hide();
      isShow = false;
    }
  }
}).scroll();