JSFiddle - React, Tailwind, and code Playground

by Memdu Musaib

HTML

<div class="header">
	<h1>
  This is Header
  </h1>
  </div>
 <div>
 <p>
 TEST
 </p>
  <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p> <p>
 TEST
 </p>
 </div>

CSS

.header{background:#000; color:#fff; padding:10px; transition:0.5s;    float: left;
    width: 100%;}

.header.toptrans.menu-sticky{    position: fixed; top: 0; opacity: 1;width:100%;}

.header.toptrans { top: -90px; position: relative;}

JavaScript

jQuery(document).ready(function ($) {
                $(window).scroll(function () {
                    if ($(this).scrollTop() <= 0) {
                        $('.header').removeClass("toptrans");
                        
                    } else {
                        $('.header').addClass("toptrans");
                    }
                });
            });
		




var lastScroll = 0;

jQuery(document).ready(function($) {
   

    jQuery(window).scroll(function(){
        setTimeout(function() { //give them a second to finish scrolling before doing a check
            var scroll = jQuery(window).scrollTop();
            if (scroll > lastScroll) {
                
                jQuery(".header").removeClass("menu-sticky");
               
            } 
            if (scroll == 0) {
            jQuery(".header").removeClass("menu-sticky");
               
            }
            else if (scroll < lastScroll - 5) {
                
                  
                jQuery(".header").addClass("menu-sticky");
              
            }
            lastScroll = scroll;
        },0);
    });
});