JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    Content before floating text<br/>
    Content before floating text<br/>
    Content before floating text<br/>
</div>
<div id="floatguy">
    <span>Floating Header</span>
</div>
    
<div id="longguy">
        Other text <br/>
        Other text <br/>
        Other text <br/>
        Other text <br/>
        Other text <br/>
        Other text <br/>
        Other text <br/>
</div>

CSS

#longguy {
  padding-top:50px;
  height:800px;
}
#floatguy {
 color:red;
}

JavaScript

//keep element in view
(function($)
{
    $(document).ready( function()
    {
        var elementPosTop = $('#floatguy').position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            //if top of element is in view
            if (wintop > elementPosTop)
            {
                //always in view
                $('#floatguy').css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                //reset back to normal viewing
                $('#floatguy').css({ "position":"inherit" });
            }
        });
    });
})(jQuery);