JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flash_error">
    <div>ERROR MESSAGE</div>
    <div>Scroll: <span id="scroll"></span></div>
    <div>Flash top: <span id="top"></span></div>
    <div>Attr Height: <span id="height"></span></div>
</div>

<div class="extra"></div>

<div class="extra"></div>

CSS

.extra {
    height: 800px;
    background-color: gray;
}

JavaScript

function scrollErrorMessageToTop() {
    var flash_error = jQuery('#flash_error');
    var flash_position = flash_error.position();

    function lockErrorMessageToTop() {
        var place_holder = jQuery("#place_holder");
        if (jQuery(this).scrollTop() > flash_position.top && flash_error.attr("position") != "fixed") {
            flash_error.css({
                'position': 'fixed',
                'top': "0px",
                "width": flash_error.width(),
                "z-index": "1"
            });
            place_holder.css("display", "");
        } else {
            flash_error.css('position', '');
            place_holder.css("display", "none");
        }

    }
    if (flash_error.length > 0) {
        lockErrorMessageToTop();

        jQuery("#flash_error").after(jQuery("<div id='place_holder'>"));
        var place_holder = jQuery("#place_holder");
        place_holder.css({
            "height": flash_error.height(),
            "display": "none"
        });
        jQuery(window).scroll(function(e) {
            lockErrorMessageToTop();
        });
    }
}
scrollErrorMessageToTop();