JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spacing"></div>
<div id="content"> HELLO </div>
<div id="floatingContent"> PROBLEM </div>
<div class="spacing"></div>

CSS

.spacing {
    height:500px;
}

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

#floatingContent{
    position:fixed;
    height:50px; 
    top:560px;
    background:blue;
}

JavaScript

var startingPoint = 560;
var maxTopPosition = 150;
$(window).scroll(function() {
    $("#floatingContent").css("top", Math.max(maxTopPosition, startingPoint - $(this).scrollTop()));
});