JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<aside id="menu"></aside>
<section id="container">
	<main id="content"></main>
	<footer id="service"></footer>
</section>

CSS

body{
	margin:0;
}
#menu{
	position:fixed;
	top:10px;
	left:10px;
	bottom:10px;
	z-index:1;
	width:150px;
	background:rgba(102, 153, 204, 1);
}
#content{
	height:2000px;
	background:linear-gradient(top, rgba(255, 255, 153, .05), rgba(255, 255, 153, .2));
	background:-webkit-linear-gradient(top, rgba(255, 255, 153, .05), rgba(255, 255, 153, .2));
	background:-moz-linear-gradient(top, rgba(255, 255, 153, .05), rgba(255, 255, 153, .2));
	background:-o-linear-gradient(top, rgba(255, 255, 153, .05), rgba(255, 255, 153, .2));
	background:-ms-linear-gradient(top, rgba(255, 255, 153, .05), rgba(255, 255, 153, .2));
}
#service{
	height:200px;
	background:#369;
}

JavaScript

$(function () {
	var menu = $('#menu'),
		delta = parseInt(menu.css('bottom')),
		footer = $('#service'),
		footerRect = footer.get(0).getBoundingClientRect(),
		footerTop = footerRect.top + document.documentElement.scrollTop,
		viewportHeight = document.documentElement.clientHeight,
		current;

	$(window).on('scroll', function (e) {
		current = $(this).scrollTop() + viewportHeight - footerTop;

		console.log(current);
		if (current < 0) {
			current = 0;
		}

		menu.css({
			bottom: current + delta + 'px'
		});
	});
});