JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrap'>
    <div id='header_nav' class="header">
        <div id="header_wrap">
                <div style="position:absolute; bottom:0; left:0;">Here comes the menu</div>
                <div style="position:absolute; bottom:0; right:0;">Here comes the logo</div>
        </div>
    </div>
    <div id='content'>Here comes the content Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus tempor lacinia. Maecenas ut libero augue. Cras non tincidunt nisi, non malesuada risus. Nunc nisi risus, faucibus sed commodo eget, fermentum nec nibh. Phasellus ornare cursus tellus sed tincidunt. Nunc sodales vestibulum nunc, id suscipit felis imperdiet elementum. Nunc quis tortor turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin non convallis elit. Praesent aliquam sapien lorem, vitae lobortis quam hendrerit sit amet. In nec lorem eu nisi volutpat imperdiet. Fusce et euismod sapien. Maecenas sed dictum nisi, non ullamcorper nisi. Cras id ligula nec purus porta pretium. Maecenas in sem eu velit malesuada faucibus in vitae risus. Duis rhoncus dapibus nulla. Duis at consectetur lectus, et aliquet quam. Nullam eu vestibulum nisi. Nullam mattis tempor urna, nec vulputate arcu cursus ac. Praesent condimentum ultricies sapien vel sollicitudin. Cras cursus consequat viverra. Morbi pulvinar iaculis enim vitae sollicitudin. Nullam tristique diam lectus, at semper orci vulputate id. In vehicula augue enim, a sagittis ipsum adipiscing vel. Aenean a risus sagittis, pellentesque purus ut, adipiscing erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dignissim massa vestibulum mollis facilisis. Donec egestas feugiat odio nec fringilla. Praesent malesuada placerat libero eget ultrices. Fusce vel rhoncus ipsum. Pellentesque ornare facilisis dictum. Mauris nec hendrerit ante. Nam lectus erat, laoreet volutpat vulputate nec, fringilla vulputate neque. Aliquam vitae tellus...

CSS

body, html {
    margin:0;
    padding:0;
    width:100%;
}
#wrap {
    width:100%;
    background-color: #fff;
}
#header_nav {
    border-bottom: 1px solid #d4d4d4;
}
#header_wrap {
    width:970px;
    margin:auto;
    position:relative;
}
.header {
    width:100%;
    height:80px;
    background: #fff;
    color: red;
    position:fixed;
    top:0;
    left:0;
    transition: height 500ms, background 500ms, background-image 500ms;
}
.header.tiny {
    height:40px;
    background: #fff;
}
#content {
    margin: 80px auto;
    width: 970px;
}

JavaScript

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('#header_nav').removeClass('tiny');
    } else {
        $('#header_nav').addClass('tiny');
    }
});