JSFiddle - React, Tailwind, and code Playground

by Jon Fuller

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="container">
	<div class="expand"></div>
	
	<div class=""></div>
	
	<div class="expand blue"></div>
	
	<div class=""></div>
</div>

CSS

body {
	height: 1000px;
}

.container {
	margin-top: 450px;
	position: relative;
}

div{
	min-height: 400px;
}

.expand {
	background: tomato;
	min-height: 400px;
	min-width: 20%;
	will-change: width;
	margin: 0 auto;
}

.blue {
	background: blue;
}

JavaScript

$(document).ready(function() {
	var docHeight = $(document).height(),
		windowHeight = $(window).height(),
		scrollPercent;

	$(window).scroll(function() {
		scrollPercent = $(window).scrollTop() / (docHeight - windowHeight) * 100;

		$('.expand').width(scrollPercent + '%');
	});
});