JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="spacer"></div>
    <div class="header">Header 1</div>
    <div class="header">Header 2</div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="header">Header 3</div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="header">Header 4</div>
    <div class="spacer"></div>
    <div class="header">Header 5</div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="header">Header 6</div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="header">Header 7</div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="header">Header 8</div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
</body>

CSS

html, body {
        margin: 0;
        padding: 0;
        border: 0;
    }
    .spacer {
        height:200px;
        background:#f00;
        opacity:.5;
        border-top:#d22 5px solid;
        width: 100%;
        z-index:-1;
    }
    .header {
        height:50px;
        background:#0f0;
        width:100%;
        z-index:500;

JavaScript

var topOffset = new Array();

    function scrollFunction() {

        var scrollHeight = $(window).scrollTop();
        var headerCounter = 0;
        var scrolled = 0;
        var headerItems = $('.header').length;

        $('.header').each(function (index, el) {

            var elementHeight = $(this).outerHeight();

            var nextElementHeight = 0;
            var nextElement;

            if (index !== $('.header').length - 1) {
                nextElementHeight = $('.header').eq(index + 1).outerHeight();
                nextElement = $('.header').eq(index + 1);
            }

            if (scrollHeight >= topOffset[headerCounter] && (scrollHeight < topOffset[headerCounter + 1] || headerCounter == headerItems - 1)) {

                scrolled = 1;

                if (scrollHeight >= topOffset[headerCounter + 1] - elementHeight) {
                    $(this).css({
                        position: "fixed",
                        top: -(scrollHeight - (topOffset[headerCounter + 1] - elementHeight))
                    });
                    nextElement.css({
                        position: "fixed",
                        top: topOffset[headerCounter + 1] - scrollHeight
                    });
                    $('body').css({
                        "padding-top": elementHeight + nextElementHeight
                    });
                    return false;
                } else {
                    $(this).css({
                        position: "fixed",
                        top: 0
                    });
                    nextElement.css({
                        position: "static",
                    });
                    $('body').css({
                        "padding-top": elementHeight
                    });
                }

            } else {
                $(this).css({
                    position: "static"
                });
            }

            headerCounter++;
        });

        if (scrolled == 0) {
        ...