JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"></script>
<div id="container">
<div id="header">
        <div id="header-content" class="stick">
            <a>1</a> <a>2</a> <a>3</a> <a>4</a>
        </div>
    </div>
    <div id="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus aliquet risus, eget commodo purus aliquam eu. Proin in metus est. Curabitur lacus sapien, volutpat et tincidunt vitae, semper vel diam. Vestibulum porta, purus quis tempor facilisis, massa ante sollicitudin nisi, id tincidunt urna quam non mi. Duis in quam erat. Sed facilisis elit et magna dignissim sed porta justo sodales. Ut posuere, dui vitae vehicula pretium, nunc est rutrum risus, et condimentum diam lacus vitae dui. Nulla a dolor ac quam tristique fermentum in ullamcorper leo. Quisque molestie feugiat accumsan. Phasellus laoreet risus vitae enim sollicitudin tincidunt auctor mi ultrices. Vivamus dignissim elit quis dui accumsan mattis. Cras dignissim varius lacinia. In ut ligula turpis, in gravida lacus.

Etiam erat diam, tristique at aliquet eu, viverra nec erat. Suspendisse viverra pulvinar tellus, nec rutrum neque posuere eget. Proin tristique massa nec dolor imperdiet iaculis vestibulum justo venenatis. Ut quam orci, blandit sed faucibus ut, cursus sit amet libero. Vestibulum at gravida quam. Vestibulum non sapien nec metus faucibus tristique. Nam molestie porttitor molestie. Phasellus pulvinar varius metus sit amet condimentum. In arcu mi, ornare in laoreet non, dignissim ac orci. Curabitur aliquet adipiscing tincidunt. Maecenas posuere accumsan eleifend.

Ut aliquet purus eu leo gravida ac faucibus magna venenatis. Pellentesque tempus nulla nec ante sodales in posuere sem consequat. Sed eros elit, tempus in rutrum non, sodales eu lacus. Integer ipsum lorem, auctor in consectetur id, hendrerit et nibh. Cras nec ornare urna. Suspendisse potenti. Nulla dictum ligula sit amet lacus pellentesque egestas. Proin ut felis felis....

CSS

#header {
    margin: 80px 0;
  padding: 20px;
    background: black;
}
#footer {
    margin: 80px 0;
  padding: 20px;
    background: black;
}
#footer-content {
    position: relative;
    text-align: center;
    background-color: #EEE;
    width: 200px;
    margin-left: -100px;
        left: 50%;

}
#footer-content a {
    display: inline-block;
    padding: 10px;
    background-color: #333;
    color: #eee;
}
#footer-content.sticky {
    position: fixed;
    bottom: 0;
}

JavaScript

$('#footer').waypoint(function(event, direction) {
        $('#footer-content').toggleClass('sticky', direction === 'up');
    }, {
       offset: function() {
          return $.waypoints('viewportHeight') - $(this).outerHeight();
       }
    });