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%;
    margin-top:50px;
    width:40%;
    height:200px;
    background:#97835f;
}

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

JavaScript

var footerTop = $('#text-block').position().top;

$(document).scroll(function() {
    var scrollVal = $(document).scrollTop();
    $('#floating-container').css('top',scrollVal+'px');
    if (scrollVal < footerTop) { 
        $('#floating-container').css('top','50px');
    }
    if (scrollVal > 2347) {
        $('#floating-container').css('top','2347px');    
    }
});