JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<script src="http://imakewebthings.com/waypoints/js/jquery.waypoints.min.js"></script>
<script src="http://imakewebthings.com/waypoints/js/sticky.min.js"></script>
<div id="wrapper">
    <div id="top">Scroll Down</div>
    <div id="footer-wrapper">
        <div id="footer-form-wrapper">Form Here</div><br />Other Footer Content Here</div>
</div>

CSS

#top {
    height:800px;
}
#footer-wrapper {
    position:relative;
    background:blue;
    height:300px;
    color:red;
}
#footer-form-wrapper {
    position: fixed;
    height:150px;
    width:100%;
    left:0;
    bottom:0;
    background:lightblue;
}

.unstuck #footer-form-wrapper {
    position: absolute;
    top: 0;
    bottom: auto;
}

JavaScript

var sticky = new Waypoint.Sticky({
  element: $('#footer-wrapper')[0],
  offset: '90%',
  stuckClass: 'unstuck'
});