JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>

CSS

body { margin: 0px; background-color: #e3e3e3; }
#header { background-color: #cb5454; height: 140px; }
#sticky {
    display: none;
    background-color: #546bcb;
    height: 70px;
}
#sticky.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}
#section { height: 1500px; }
#footer { background-color: #cb5454; height: 140px; }

JavaScript

$(document).ready(function() {
    $(window).scroll(function() {
        var distanceFromTop = $(document).scrollTop();
        if (distanceFromTop >= $('#header').height())
        {
            $('#sticky').fadeIn(400).addClass('fixed');
        }
        else
        {
            $('#sticky').fadeOut(400).removeClass('fixed');
        }
    });
});