JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<header></header>
	<main>
		<div class="container">
			<div class="main">
				<a href="#">test</a>
			</div>
		</div>
		<div class="container sticky">
			<aside class="sidebar">
				<a href="#">test</a>
			</aside>
		</div>
	</main>
	<footer></footer>

CSS

*{
			box-sizing: border-box;
		}
		header,
		footer{
			height: 50px;
			background-color: grey;
		}
		main{
			position: relative;
		}
		.container{
			margin: 0 auto;
			position: relative;
		}
		.main{
			border: 4px solid blue;
			height: 2000px;
			position: relative;
		}
		.sidebar{
			border: 4px solid green;
		}
		@media (min-width: 800px){
			.container{
				width: 500px;
			}
			.main{
				margin-right: 250px;
				z-index: 1;
			}
			.container.sticky{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
			}
			.container.sticky.fixed{
				position: fixed;
				top: auto;
				bottom: 100px;
				
			}
			.sidebar{
				float: right;				
				height: 1300px;
				width: 250px;
			}
		}

JavaScript

$(document).ready(function(){
			var height = $('.container.sticky').outerHeight(),
				top = $('.container.sticky').offset().top;
			//console.log(height);
			//console.log(top);

			$(window).scroll(function(){
				if ($(window).width() > 800){
					var scroll = $(window).scrollTop() + $(window).height();
					//console.log(scroll);
					if (scroll > (height + top + 100)){
						$('.container.sticky').addClass('fixed');
					} else {
						$('.container.sticky').removeClass('fixed');
					}
				}
			});
		});