JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header_nav">nav here</div>

CSS

body {
    height:1000px;
    width:100%;
    background-color:#F0F0F0;
}

#header_nav {
    width:100%;
    height:100px;
    background-color:#666;
    position:fixed;
    top:0;
    left:0;
}

JavaScript

$(function(){
      var navStatesInPixelHeight = [40,100];
        
      var changeNavState = function(nav, newStateIndex) {
        nav.data('state', newStateIndex).stop().animate({
          height : navStatesInPixelHeight[newStateIndex] + 'px'
        }, 600);    
      };
        
      var boolToStateIndex = function(bool) {
        return bool * 1;    
      };
        
      var maybeChangeNavState = function(nav, condState) {
        var navState = nav.data('state');
        if (navState === condState) {
          changeNavState(nav, boolToStateIndex(!navState));
        }
      };
        
      $('#header_nav').data('state', 1);
        
      $(window).scroll(function(){
        var $nav = $('#header_nav');
            
        if ($(document).scrollTop() > 0) {
          maybeChangeNavState($nav, 1);
        } else {
          maybeChangeNavState($nav, 0); 
        }
      });
    });