JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="leftElement">
        <p>
            JavaScript (/ˈdʒɑːvɑːˌskrɪpt/; JS) is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.
        </p>
        <p>
            JavaScript (/ˈdʒɑːvɑːˌskrɪpt/; JS) is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.
        </p>
        <p>
            JavaScript (/ˈdʒɑːvɑːˌskrɪpt/; JS) is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.
        </p>
        <p>
            JavaScript (/ˈdʒɑːvɑːˌskrɪpt/; JS) is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.
        </p>
        <p>
            JavaScript (/ˈdʒɑːvɑːˌskrɪpt/; JS) is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.
        </p>
        <p>
            JavaScript (/ˈdʒɑːvɑːˌskrɪpt/; JS) is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document...

CSS

#container{
    background: silver;
    height:500px;
    overflow: scroll;
    position: relative;
}
#leftElement{
    background: blue;
    height: auto;
    float: left;
    width: 450px;
}

#rightElement{
    margin-top: 50px;
    background: green;
    height:150px;
    float: left;
    margin-left: 10px;
    width: 150px;    
}

JavaScript

$("#container").bind('scroll', function() {
    var fromTop = 50;
    var scrollVal = $("#container").scrollTop();
    var top = 0;
    if ( scrollVal > fromTop) {
        top = scrollVal - fromTop;
        $('#rightElement').css({'position':'absolute','right':'1em','top' :top+'px'});
    } else {
        $('#rightElement').css({'position':'static','top':'0px'});
    }
});