JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div id="menu">addd</div>
</div>

CSS

#menu {
    position:fixed;
    height:50px;
    background:#ccc;
    left:0;
    top:0;
    float:left;
    width:100%;
}
.outer {
    height:800px;
}
#menu.big {
    height:50px
}

JavaScript

$(window).scroll(function () {
    var sc = $(window).scrollTop()
    if (sc > 50) {
        $("#menu").addClass("big")
    } else {
        $("#menu").removeClass("big")
    }
});