JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="contentWrapper">
<div id="left">
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>
<div id="right">
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
   ...

CSS

#contentWrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 17;
    overflow-y: overlay;
    overflow-x: hidden;
}
#left {
    width: 50vw;
    background-color: #fff;
    overflow: hidden;
    position: absolute;
    left: 0;
}
#right {
    width: 50vw;
    background-color: #fff;
    overflow: hidden;
    position: absolute;
    right: 0;
}

JavaScript

//Scroll handler for homepage
var _left = document.getElementById('left');
var _content = document.getElementById('contentWrapper');
var left = $('#left');
var right = $('#right');
var visibleHeight = $(window).height();
var ratioLeftRight = undefined;
document.getElementById('contentWrapper').onscroll = function(e){
	if(!ratioLeftRight) {
		ratioLeftRight = (left.outerHeight()-visibleHeight) / (right.outerHeight()-visibleHeight);
	}

	if(ratioLeftRight > 0) {
		_left.style.top = _content.scrollTop - (_content.scrollTop * ratioLeftRight) + 'px';
	} else {
  	_left.style.top = _content.scrollTop + 'px';
	}
};