JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="header"></div>
    <div id="mini-header"></div>
</div>

CSS

#wrap {
    width:100%;
    height:800px;
    background:#EEE;
}
#header {
    width:100%;
    height:70px;
    background:#000;
}
#mini-header {
    position:fixed;
    top:0;
    height:45px;
    width:100%;
    background:#FFC;
    display:none;
}

JavaScript

$(document).ready(function() { 
    $(window).scroll(function() {
            if($(window).scrollTop() > 70) {
                $('#mini-header').delay(4000).show();
            } else if($(window).scrollTop() < 70) {
                $('#mini-header').hide();
            }
    });
});