JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="header-wrapper">
        <div class="header">
            Header
        </div>
        <div class="menu">
            Menu
        </div>
    </div>
</body>

CSS

body{height:1000px; overflow:scroll; padding:0; margin:0}
.header{background:#00457c; color:#fff; padding:22px 0; text-align:center;
    -webkit-transition:all 250ms ease-out;
    -moz-transition:all 250ms ease-out;
    -ms-transition:all 250ms ease-out;
    -o-transition:all 250ms ease-out;
    transition:all 250ms ease-out;
}
.menu{background:#aaa; padding:22px 0; text-align:center;
    -webkit-transition:all 250ms ease-out;
    -moz-transition:all 250ms ease-out;
    -ms-transition:all 250ms ease-out;
    -o-transition:all 250ms ease-out;
    transition:all 250ms ease-out;
}

.down .header-wrapper{position:fixed; top:0; width:100%; z-index:1000}
.down .header{padding:10px 0}
.down .menu{padding:10px 0}

JavaScript

$(window).on("scroll", function() {
    var fromTop = $(window).scrollTop();
    $("body").toggleClass("down", (fromTop > 1));
});