JSFiddle - React, Tailwind, and code Playground

HTML

<div class="normal box">blub</div>
<div id="content">Foo bar !</div>

CSS

.fix {
    position: fixed;
}

.normal {
    position: absolute;
}

.box{
    width: 100px;
    height: 100px;
    background-color: red;
}

#content {
    background-color: blue;
    width: 400px;
    height: 2400px;
}

JavaScript

$(function(){
   var $box    = $('.box'),
       offset  = $box.offset(),
       doc_h   = $(document).height();
    
    $(window).scroll(function(){
        if($(window).scrollTop() > offset.top) {
            if(!$box.hasClass('fix'))
                $box.toggleClass('normal fix');
        }
        else{
            if(!$box.hasClass('normal'))
                $box.toggleClass('normal fix');
        }
    });
});