JSFiddle - React, Tailwind, and code Playground

by adidassj

HTML

<script src="http://staging.alcoholrehab-florida.com/scripts/waypoints.min.js"></script>
<script src="http://staging.alcoholrehab-florida.com/scripts/waypoints-sticky.min.js"></script>

<div class="header">Header</div>
    
<div class="sidebar">Sidebar</div>

<div class="content">Content</div>

<div class="footer">Footer</div>

CSS

.header {
    background:#ccc;
    height:260px;
    margin-bottom:20px;
}
.sticky-wrapper {
	float:left;
}
.stuck {
	position:fixed;
	top:0;
	margin-top:264px;
}
.sidebar {
    background:#ff0000;
    height:350px;
    width:90px;
    margin-right:10px;
    float:left;
}

.content {
    background:#666;
    height:900px;
    width:300px;
    float:left;
}

.footer {
    background:#333;
    height:200px;
    width:100%;
    clear:both;
}

JavaScript

$(document).ready(function() {
$('.sidebar').waypoint('sticky', {
  offset: 264 // Apply "stuck" when element 264px from top
});;
});