JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu"></div>
<section id="filler"></section>

CSS

body{margin:0;padding:0;}

#menu {
    width: 100%;
    height: 200px;
    background: #000;
    position:fixed;
    top:0;
    left:0;
}

#filler{ width:100%; height: 1000px; background-color:#ccc;}

JavaScript

$(window).scroll(function(){
    if($(this).scrollTop() > 100){
        $("#menu").animate({
            height: "100px"   
        }, 100, function(){});
    }
    else{
       $("#menu").animate({
            height: "200px"   
       }, 100, function(){}); 
    }
});