JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page cf">
    <div class="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis urna, tempus ut nisi vel, mollis malesuada tortor. In malesuada ante a nisl blandit, eu cursus felis congue. Nulla eget turpis sed justo laoreet finibus vitae feugiat magna. Praesent porttitor nulla eget placerat ullamcorper. Maecenas fringilla velit at consectetur consectetur. Pellentesque ac metus cursus velit finibus tincidunt. Sed sit amet libero lobortis, consequat massa quis, pellentesque orci. Mauris nec turpis et nisl aliquam faucibus. In pellentesque ornare velit ut consequat. In hendrerit massa diam, vel pulvinar urna tempus nec. Aliquam pulvinar nisl faucibus enim vulputate lobortis. Nam eu ipsum sed augue rhoncus iaculis. Aliquam sit amet commodo tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam et nibh malesuada, scelerisque ante sit amet, pulvinar nisl. Cras sit amet ex tortor. Curabitur lobortis, enim at tempus lacinia, metus metus faucibus tortor, a volutpat quam ipsum vel velit. Aenean vitae viverra est. Cras erat felis, ullamcorper vel varius in, congue quis risus. Nulla sit amet vulputate diam. Donec in volutpat ligula. Proin ac mollis mauris. Donec sollicitudin magna vitae augue imperdiet dapibus. Pellentesque id velit quis elit venenatis tempus ut ac nibh. Cras velit libero, tincidunt sed sagittis eu, faucibus non enim. In hac habitasse platea dictumst. Nam neque lectus, eleifend at quam ac, consequat pretium magna. Pellentesque iaculis rutrum nibh sit amet tempus. Curabitur id ornare dolor.

Aliquam sed blandit nisl. Nulla vel lacinia leo. Mauris cursus tempor fermentum. Nam in placerat massa. Nam sollicitudin efficitur dolor, condimentum vehicula diam sodales at. Duis placerat sollicitudin ligula, in fringilla justo facilisis efficitur. Etiam molestie orci sed felis finibus tempus. Nunc placerat vulputate justo, ac pellentesque orci suscipit ac. Praesent...

CSS

.page {

}

.left {
    float:left;
    width:45%;
    position: relative;
}

.right {
    float:right;
    width:45%;
    position: relative;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

JavaScript

$(document).bind('ready scroll',function() {
    var c = 0,
    f = $(window);
    k = 0,
    d = $(window).scrollTop() + k,
    e = $('.right').offset().top,
    j = d - e,
    l = $('.right').outerHeight(),
    m = $('.left').outerHeight(),
    n = l - m,
    h = $('.left');
    console.log('scrollTop:', d, 'rightTop:', e, 'rightHeight', l, 'leftHeight', m);
if (!(m >= l)) {
    if (j > 0) {
        h.css({
            position: "fixed"
        });
        var o = Math.min(100, 100 / (l - (f.height() - parseInt($(".page").css("padding-bottom")) - k)) * j);
        console.log(o);
        c = j - n * o / 100
        console.log(c);
    } else h.css({
        position: "static"
    });
    h.css({
        "-webkit-transform": "translateY(-" + c + "px) translateZ(1px)",
        "-moz-transform": "translateY(-" + c + "px) translateZ(1px)",
        "-ms-transform": "translateY(-" + c + "px)",
        "-o-transform": "translateY(-" + c + "px) translateZ(1px)",
        transform: "translateY(-" + c + "px) translateZ(1px)"
    })
}
});