JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>

<div id="floating-container"></div>

<div id="text-block">
    Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...
    
    
    Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...
    
    
    Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...
    
    
    Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...
    
    
    Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...
    
    
    Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...
    
    
    Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...
    
    
    Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your...

CSS

body {
    position:relative;
    margin:0;    
}

header {
    float:left;
    width:100%;
    height:100px;
    background:#ddd;
}

#text-block {
    float:left;
    width:50%;
    height:100%;
    color:#000;
}

#floating-container {
    position:absolute;
    top:100px;
    left:55%;
    width:40%;
    height:200px;
    background:#97835f;
}

footer {
    float:left;
    width:100%;
    height:300px;
    background:#ddd;
}

JavaScript

$(function(){
    var container = $('#floating-container');
    var minTop = $('header').outerHeight();
    var maxTop = $('footer').offset().top - container.outerHeight(); 
    
    $(document).scroll(function() {
        container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
    });
});