JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<div class="navbar">
    shit!
</div>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste sunt numquam dicta officiis nobis accusantium. At illo temporibus illum necessitatibus ad ratione sint tempore totam facilis vitae? Fugit odio.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste sunt numquam dicta officiis nobis accusantium. At illo temporibus illum necessitatibus ad ratione sint tempore totam facilis vitae? Fugit odio.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste sunt numquam dicta officiis nobis accusantium. At illo temporibus illum necessitatibus ad ratione sint tempore totam facilis vitae? Fugit odio.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste sunt numquam dicta officiis nobis accusantium. At illo temporibus illum necessitatibus ad ratione sint tempore totam facilis vitae? Fugit odio.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste sunt numquam dicta officiis nobis accusantium. At illo temporibus illum necessitatibus ad ratione sint tempore totam facilis vitae? Fugit odio.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste sunt numquam dicta officiis nobis accusantium. At illo temporibus illum necessitatibus ad ratione sint tempore totam facilis vitae? Fugit odio.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste sunt numquam dicta officiis nobis accusantium. At illo temporibus illum necessitatibus ad ratione sint tempore totam facilis vitae? Fugit odio.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste sunt numquam dicta officiis nobis accusantium. At illo temporibus illum necessitatibus ad ratione sint tempore totam facilis vitae? Fugit odio.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste sunt numquam dicta officiis...

CSS

.navbar{
    background-color:red;
    height:40px;
    width:100%;
    position:fixed;
    top:0;
    left:0;
}

JavaScript

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
       console.log('gowing down');
       $('.navbar').hide();
   } else {
      console.log('gowing up');
      $('.navbar').fadeIn(100,function(){
          $(this).delay(1000).fadeOut(200, function(){
              if($(this).mouseover()){
                  $(this).show();
              }
          });
    });
   }
   lastScrollTop = st;
});