JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left" class="linked">
    <img src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg"/>
</div>
<div id="right" class="linked">
    <img src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg"/>
</div>

<div class='infoWindow'>
    <p>Left div is scrolled by <span class='leftDivScroll'>0</span> percent.</p>
</div>

CSS

.linked {
    height: 2000px;
    width: 40%;
    float: left;
}
#left {
    background-color: red;
}
#right {
    height: 1000px;
    /* Edit value here to see how the behaviour changes */
    position: relative;
    background-color: green;
}

.infoWindow{
    position: fixed;
    left: 10px;
    top: 10px;
    background: rgba(0,0,0,.5);
    color: white;
}

JavaScript

// illustration for an answer for parallax question at http://stackoverflow.com/questions/15021405/how-to-implement-parallax-scrolling

var windowHeight = $(window).innerHeight(),
    rightLayerHeight = $('#right').height(),
    leftLayerHeight = $('#left').height();

$(window).on('scroll', function (e) {
    var windowScroll = $(window).scrollTop(),
        relativeScroll = windowScroll / (leftLayerHeight - windowHeight),
        rightLayerScroll = relativeScroll * (rightLayerHeight - windowHeight);
    $('.infoWindow p .leftDivScroll').html(Math.round(relativeScroll*100));
    $('#right').css('top', windowScroll - rightLayerScroll);
});