JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

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, ifEq) {
        var navState = nav.data('state');
        if (navState === ifEq) {
            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); 
        }
    });
});