JSFiddle - React, Tailwind, and code Playground

HTML

<div id="railway_lines">
    <div class="rails">
        <div class="truck"></div>
    </div>
</div>

CSS

div#railway_lines {
    background-color: #55c1ff;
    height: 1800px;
    position: relative;
}
div.rails, div.truck {
    width: 80px;
}
div.rails {
    background-color: #ffee33;
    height: 800px;
    position: absolute;
    top: 100px;
}
div.rails:first-child {
    left: 0;
}
div.rails:not(:first-child) {
    right: 0;
}
div.truck {
    background-color: #00ff00;
    position: fixed;
    height: 120px;
    top: 100px;
}

JavaScript

var truck = $(".truck"),
    rails = $(".rails"),
    css_top_onmove = $(rails[0]).css('top'),
    css_top_onhold = $(rails).height() - $(truck).height(),
    css_left = $(rails[0]).css('left'),
    css_right = $(rails[1]).css('right');

$(window).scroll(function () {
    var pos_top = $(window).scrollTop();

    if (pos_top > css_top_onhold) {
        $(truck).css({
            'position': 'absolute',
            'top': css_top_onhold + 'px'
        });
        
        $(truck[0]).css('left', css_left);
        $(truck[1]).css('right', css_right);
    } else {
        $(truck).css({
            'position': 'fixed',
            'top': css_top_onmove,
            'left': '',
            'right': ''
        });
    }
});