JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    
    
</div>

<div class="header-small">
    
</div>

CSS

body {height:10000px;}
.header {background:black; width:100%; height:65px; position:relative;}
.header-small {background:red; width:100%; height:35px; position:fixed; top:0;}

JavaScript

$(document).ready(function(){
 $('.header-small').hide();
   $(window).scroll(function () {
   if($(window).scrollTop()>0{
    $('.header-small').show();
    }
    else{$('.header-small').hide();}    
   });
});