JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="fixed-header-area fixed-already">
    <p>Content Here</p>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

.fixed-header-area {
position: fixed;
top: -160px;
left: 0;
width: 100%;
z-index: 10000;
-webkit-transition: 0.5s all ease-in-out;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
transition: 0.5s all ease-in-out;
}

.fixed-header-area.fixed-already {
top: 0;
}

.fixed-header {
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #DFDFDF;
-webkit-box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.3);
}
div {
    padding:10px;
}
}

JavaScript

$(window).scroll(function(){
        if (!$('body').hasClass('fixNav-enabled')) {return false; }
        var fixedHeader = $('.fixed-header-area');
        var scrollTop = $(this).scrollTop();
        var headerHeight = $('.header-wrapper').height() + 20;
        
        if(scrollTop > headerHeight){
            if(!fixedHeader.hasClass('fixed-already')) {
                fixedHeader.stop().addClass('fixed-already');
            }
        }else{
            if(fixedHeader.hasClass('fixed-already')) {
                fixedHeader.stop().removeClass('fixed-already');
            }
        }
    });