JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<div id="site">

<div class="header">Scroll here</div>
<div class="maincontent"></div>
</div>

CSS

body { height: 1000px; }
.maincontent { height: 400px; background: red;}
.header { background: green; color: white; text-align: center; width: 100%; }

JavaScript

function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = jQuery('#site').offset().top;
        var headerheight = jQuery(".header").height();
        
        if (window_top > div_top) {
            jQuery('.header').css({
                position: 'fixed',
                top: '0px'
            });
            jQuery('.maincontent').css({
                paddingTop: headerheight
            });
        } else {
            jQuery('.header').css({
                position: 'static',
                top: '0px'
            });
            jQuery('.maincontent').css({
                paddingTop: 0
            });
        }
    }

    jQuery(function () {
        jQuery(window).scroll(sticky_relocate);
        sticky_relocate();
    });