JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<div id="container">
    <div id="layer1">
        <div id="obj">
            
        </div>
    </div>
</div>

CSS

#container{
    height:400px;
    overflow-y:scroll;
}
#layer1{
    height:600px;
    background-color:#000;
}
#obj{
    height:60px;
    width:60px;
    background-color:yellow;
    color:#000;
    position:absolute;
    left:30px;
    top:0px;
}

JavaScript

$(function(){
    var layer1 = $('#layer1');
    var obj = $('#obj');
        $('#container').scroll(function(){             
           var distance = layer1.outerHeight() + obj.outerHeight() + 20;            
           var pos = this.scrollTop/$(this).innerHeight() * distance;
           obj.css('top', pos);
    });
});