JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="leftCol"></div>
</div>

CSS

.leftCol{
    background: #ccc;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 200px; left: 0;
    
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}

.container{
    position: relative;
    height: 3000px;
}

JavaScript

$(function() {
    var topPadding = 57,
        $div = $(".leftCol"),
        offset = $div.offset()
    ;
    
    $(window).scroll(function() {
        
        if ($(window).scrollTop() > offset.top) {
            var delta = $(window).scrollTop() - offset.top + topPadding;
            
            $div.css({
                "-webkit-transform": "translateY(" + delta + "px)",
                "-ms-transform": "translateY(" + delta + "px)",
                "transform": "translateY(" + delta + "px)"
            });
        } else { 
            $div.css({
                "-webkit-transform": "translateY(0)",
                "-ms-transform": "translateY(0)",
                "transform": "translateY(0)"
            });
        }
    });
});