JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <h1>Sticky Header</h1>
    </header>


    <main class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet aliquet augue, ut faucibus nibh vulputate id. Suspendisse fermentum eros et posuere vestibulum. Mauris varius lacinia tempus. Duis mollis nunc diam, nec luctus lacus lobortis
        sed. Mauris a sagittis mi. Curabitur consequat orci dolor, et scelerisque massa placerat mattis. Nam hendrerit in mauris nec varius. Maecenas faucibus viverra leo, ac gravida orci suscipit eu. Etiam sollicitudin sit amet ex eu tincidunt. Fusce
        ac fermentum elit. Sed vel orci ac turpis elementum commodo id vitae nibh. Pellentesque porta erat feugiat facilisis aliquet. Nunc consectetur libero dignissim, aliquam nisi sed, volutpat sem. Aliquam aliquet justo non augue facilisis, sed facilisis
        lectus varius. Pellentesque in nunc eget diam condimentum egestas vel non mauris. Vestibulum ut sagittis justo. Donec pharetra massa magna, at laoreet dolor rhoncus non. Sed dignissim imperdiet rhoncus. Fusce gravida ipsum ut tellus condimentum,
        sit amet ornare augue sagittis. Etiam viverra nulla nec ante pellentesque, id gravida ipsum rhoncus. Vivamus rhoncus lectus vitae erat posuere, in tristique dolor porta. Sed posuere auctor lacus ut sollicitudin. Praesent ac sagittis sem. Phasellus
        in mauris iaculis, fermentum lorem sit amet, tristique arcu. Phasellus id ex justo. Praesent a mi mauris. Ut condimentum laoreet libero, at vestibulum libero iaculis a. Sed justo lacus, tincidunt id elit eget, elementum dictum nunc. Cras elementum
        quam sed tortor tempus cursus. Integer eu bibendum nulla. Quisque tempor magna at sagittis vestibulum. Aenean porta aliquet lobortis. Nunc eu tempor tortor, eget porttitor magna. Nulla finibus fermentum semper. Nunc sollicitudin ac ante quis sollicitudin.
        Pellentesque accumsan rhoncus nulla sed mattis. Vestibulum at nisl maximus ligula imperdiet faucibus sed vitae...

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper {
    margin: 0 auto;
    min-height: 100%;
    max-height: 2000px;
    font-size: 100%;
}

header {
    top: 20%;
    width: 100%;
    text-align: center;
    font-size: 3em;
    background: rgb(252, 237, 25);
    color: rgb(39, 25, 223);
    position: absolute;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 3em;
    background: rgb(252, 237, 25);
    color: rgb(39, 25, 223);
    opacity: 1;
}

main {
    width: 100%;
    margin-top: auto;
    /* min-height: 1500px; */
    background-color: rgb(198, 252, 234);
}

footer {
    width: 100%;
    max-height: 150px;
    background: rgb(31, 201, 231);
    position: relative;
    font-size: 1.5em;
    bottom: 0;
}

JavaScript

window.addEventListener('scroll', stickyHeader);
var header = document.querySelector('header');
var headerBottom = header.getBoundingClientRect().bottom + window.pageYOffset;
var flag = true;

function stickyHeader() {

    if (window.pageYOffset < headerBottom) {
        header.classList.remove('sticky');
        flag = true;

    } else if (window.pageYOffset > headerBottom && flag) {
        header.classList.add('sticky');
        fade(header, 2000, 50);
        flag = false;
    }
    if (flag) {
        console.log('yes')
    } else {
        console.log('no')
        clearInterval(fade);
    }
}

function fade(elem, t, f) {
    var fps = f || 50;
    var time = t || 500;
    var steps = time / fps;
    var op = 0;
    var d0 = 1 / steps;
    var timer = setInterval(function() {
        op += d0;
        header.style.opacity = op;
        steps--;
        if (steps == 0) {
            clearInterval(timer);
        }
    }, (1000 / fps));

};