JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div id="default">I AM DEFAULT HEADER</div>
    <div id="sticky">I APPEAR IF SCROLL POSITION >= 100px</div>
</div>
<div id="page">START
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />CONTENT
    <br />
    <br />
    <br />END</div>
<div id="footer">I AM PAGE FOOTER</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#header, #page, #footer {
    float: left;
    display: block;
    width: 100%;
}
#header {
    background: #CCCCCC;
}
#default {
    display: block;
    height: 100px;
    background: #64D989;
}
#sticky {
    display: none;
    height: 50px;
    background: #D9D164;
}
#footer {
    background: #EEEEEE;
}

JavaScript

$(document).ready(function () {
    var sticky = $('#sticky'),
        defaultHeader = $('#default'),
        header = $('#header')
        defaultShowing = true,
        didScroll = false;

    $(window).on("scroll", function (e) {
        didScroll = true;
    });

    window.setInterval(function () {
        if(didScroll) {
            didScroll = false;
            var scrollTop = $(document).scrollTop();
            
            if (defaultShowing && scrollTop >= 100) {
                defaultShowing = false;
                header.css('position', 'fixed');
                defaultHeader.stop().hide();
                sticky.fadeIn(1000);
            } else if (!defaultShowing && scrollTop < 100) {
                defaultShowing = true;
                header.css('position', 'relative');
                sticky.stop().hide();
                defaultHeader.fadeIn(1000);
            }
        }
    }, 250);
});