JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <div id="test2">

    	<div style="background: #0000ff;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
    	<div style="background: #ff0000;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
    	<div style="background: #0000ff;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
    	<div style="background: #ff0000;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus....

CSS

#test1 {
	margin-right: 300px;
	background: #00ff00;
}
#test2 {
	width: 300px;
	float: right;
	background: #9FF;
}
#div1 {
	margin: 10px 0 0 0;
	background: #ff00ff;
	border: 2px solid #000;
}
#div2 {
	margin: 10px 0 0 0;
	background: #FF6;
	border: 2px solid #000;
}

#div3 {
	height: 1px;
}

.sticky {
    position: fixed;
	top: 0;
    z-index: 999;
    -webkit-box-shadow: 0 8px 5px -6px #ccc;
    -moz-box-shadow: 0 8px 5px -6px #ccc;
    box-shadow: 0 8px 5px -6px #ccc;
}

JavaScript

$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop();
    var div3 = $('#div3').offset().top;
    if (y > div3) {
        $('#div1').addClass('sticky');
    } else {
        $('#div1').removeClass('sticky');
    }
});