JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spacing"></div>
<div id="content"> HELLO </div>
<div id="floatingContentMark"></div>
<div id="floatingContent"> NO MORE PROBLEM </div>
<div id="forceScroll">BLABLA</div>

CSS

.spacing {
    height:500px;
}

#content {
    background:black;
    width:100%;
    height:50px;
    color:white;
}

#floatingContent{
    height:50px; 
    background:blue;
    width:100%; 
}

#forceScroll{
    margin-top:1200px;
}

JavaScript

var fixedElement = false;
var changingMoment = 250;
$(window).scroll(function() {
    // floatingContentMark lets us know where the element shall change from fixed to relative
    // and vice versa
    var distanceFromTop = $("#floatingContentMark").offset().top - $(this).scrollTop();    
    if ((distanceFromTop <= changingMoment && !fixedElement) || 
        (distanceFromTop >= changingMoment && fixedElement)) 
    {    // either we came from top or bottom, same function is called
         fixedElement = !fixedElement;
         $('#floatingContent').trigger('fixElement');
    }
});

$('#floatingContent').bind('fixElement', function() {
    if ($(this).css('position') != 'fixed') {
        $(this).css('position', 'fixed') ;
        $(this).css('top', changingMoment) ;
    }
    else {
        $(this).css('position', 'relative') ;
        $(this).css('top', 'auto') ;
    }
}) ;