JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"></script>
<div id="page">
<div id="content">
</div>
</div>
CSS
#page
{
width: 500px;
height: 3000px;
background: #f2f6f8;
background: -moz-linear-gradient(top, #f2f6f8 0%, #7e8c96 50%, #132733 51%, #e0eff9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#7e8c96), color-stop(51%,#132733), color-stop(100%,#e0eff9));
background: -webkit-linear-gradient(top, #f2f6f8 0%,#7e8c96 50%,#132733 51%,#e0eff9 100%);
background: -o-linear-gradient(top, #f2f6f8 0%,#7e8c96 50%,#132733 51%,#e0eff9 100%);
background: -ms-linear-gradient(top, #f2f6f8 0%,#7e8c96 50%,#132733 51%,#e0eff9 100%);
background: linear-gradient(top, #f2f6f8 0%,#7e8c96 50%,#132733 51%,#e0eff9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 );
}
#content
{
float: right;
width: 250px;
border-top: 10px solid #000;
border-bottom: 10px solid #000;
min-height: 800px;
position: relative;
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 0%, #e51300 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e51300));
background: -webkit-linear-gradient(top, #f4f4f4 0%,#e51300 100%);
background: -o-linear-gradient(top, #f4f4f4 0%,#e51300 100%);
background: -ms-linear-gradient(top, #f4f4f4 0%,#e51300 100%);
background: linear-gradient(top, #f4f4f4 0%,#e51300 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e51300',GradientType=0 );
}
#content.sticky {
position: fixed;
bottom: 0;
margin-top: '';
margin-left: 250px;
}
JavaScript
$(document).ready(function() {
$.waypoints.settings.scrollThrottle = 30;
$('#content').waypoint(function(event, direction) {
$(this).toggleClass('sticky', direction === "down");
event.stopPropagation();
}, {
offset: 'bottom-in-view'
});
});