JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div class="container">
    Test
</div>
<p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p>

CSS

.content-right {
    width: 688px;
    margin-top: 11px;
    margin-right: 10px;
    float: right;
}

.container {
    background: #FFF;
    background-color: #FFF;
    width: 687px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
    margin-right: 10px;
    margin-bottom: 20px;
}

JavaScript

$('.container').data("top", $('.container').offset().top);

$(window).scroll(function(){
    if ($(window).scrollTop() > $('.container').data("top")) { 
        $('.container').css({'position': 'fixed', 'top': '0'}); 
    }
    else {
        $('.container').css({'position': 'static', 'top': 'auto'});
    }
});