JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<header class="yapiskan">STICKY HEADER</header>

<div id="lipsum">


 <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus ante augu</p>
</div>

CSS

.sabit {
top:0;
z-index: 9999;
position:fixed;
-webkit-animation: fadeInDown 0.5s ease;
animation: fadeInDown 0.5s ease;
}

#lipsum {
height:1200px;
background:red;
}

@-webkit-keyframes fadeInDown {
0%   {-webkit-transform: translateY(-100%);}
100% {-webkit-transform: translateY(0);}
} 

@keyframes fadeInDown {
0%   {-ms-transform: translateY(-100%); transform: translateY(-100%);}
100% {-ms-transform: translateY(0); transform: translateY(0);}
}

JavaScript

$(function(){   
var cubuk_seviye = $(document).scrollTop();
var header_yuksekligi = $('.yapiskan').outerHeight();
$(window).scroll(function() {
    var kaydirma_cubugu = $(document).scrollTop();
   if (kaydirma_cubugu > header_yuksekligi)   {$('.yapiskan').addClass('gizle');} 
    else {$('.yapiskan').removeClass('gizle');}     
    if (kaydirma_cubugu > cubuk_seviye) {$('.yapiskan').removeClass('sabit');} 
    else {$('.yapiskan').addClass('sabit');}                
    cubuk_seviye = $(document).scrollTop(); 
 });
 });