JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div class="spacer">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus natus dolorum impedit accusantium quod repellat eveniet excepturi adipisci deleniti eaque amet nulla maxime quibusdam molestias perspiciatis harum assumenda rerum neque, consectetur. Officiis temporibus, ab quisquam nesciunt alias, consectetur in fuga vero dolorem voluptatibus obcaecati omnis inventore, voluptatem. Cupiditate modi esse provident, ea necessitatibus cum corrupti hic labore quia laborum beatae, libero placeat natus culpa tempora velit vero, laudantium perferendis. Explicabo sunt nisi vero doloribus, illum modi recusandae nemo, qui suscipit placeat. Doloremque aliquam quasi nostrum voluptates eos repudiandae rem quod a, delectus tempora ullam quis sed vitae amet veritatis, ea quidem harum voluptatibus excepturi, facere tenetur aut consequatur provident nisi. At voluptatum quam et repudiandae dicta, quas deleniti, itaque non. Similique, maiores minus quia id. Deserunt suscipit nam, optio quia dicta architecto cupiditate sed assumenda exercitationem ad dolorum nulla unde accusantium obcaecati illum iusto, laborum debitis, commodi veritatis aliquid officiis delectus. Ratione, ducimus quae temporibus iste. Aliquid vitae quod asperiores corporis recusandae culpa nihil alias adipisci, labore facere numquam deserunt cum? Nisi nulla non accusamus ullam maiores amet quisquam laborum assumenda eos architecto nostrum facilis ipsum sint eaque accusantium eius impedit natus dignissimos, ratione id ad deserunt! Veniam, quibusdam error vitae delectus sapiente nihil numquam veritatis vero, quia assumenda accusamus ipsam doloribus, hic beatae quas deserunt et adipisci cumque, ea quo possimus cupiditate architecto voluptatum maiores. Eum ullam, eius modi architecto quidem nemo quibusdam mollitia adipisci quas, dignissimos at sapiente nostrum possimus magni itaque? Iure sint doloremque, vitae porro nam impedit adipisci eius voluptates soluta tenetur similique iusto ipsam amet...

CSS

body {
	font-family: sans-serif;
	height: 300vh;
}

.spacer {
	padding: 30px;
	height: 150vh;
}

.wrapper {
	display: flex;
	width: 100%;
	height: auto;
}

.wrapper .col {
	flex: 0 0 25%;
	margin-right: 3%;
}

.wrapper__first {
	height: 250px;
	background-color: orange;
	
	position: sticky;
	top: 0;
}

.wrapper-blue {
	padding: 15px;
	background-color: blue;
}

.wrapper-green {
	padding: 15px;
	background-color: green;
}

JavaScript

const wrapper = $('.wrapper');
const wrapperSecond = $('.wrapper-blue');
const wrapperThird = $('.wrapper-green');

let lHeight = wrapperSecond.outerHeight();
let rHeight = wrapperThird.outerHeight();
let windowHeight = window.innerHeight;
let scrollHeight = window.outerHeight;

let wrapperTop = wrapper.position().top;
let scrollYRelease = wrapperTop + lHeight - windowHeight;

let scrollDiff = lHeight - windowHeight;
let lrDiff = rHeight - lHeight;

wrapper.css('height', lHeight);

$(window).on('scroll', function() {	
	if (wrapperTop <= window.pageYOffset && scrollYRelease > window.pageYOffset) {
		let progress = (window.pageYOffset - wrapperTop) / (scrollDiff / 100);
		let progressPath = lrDiff / 100 * progress;
		
		wrapperThird.css({
			transform: 'translateY(-' + progressPath + 'px)',
		})
	}
});