Testing fixed elements

waypoints.js

by austinpray

HTML

<section>
    Adipiscing nunc dapibus pellentesque! Augue vut ultrices proin scelerisque tortor phasellus ut, et. Magna magna ac, tortor proin? Purus, dolor amet duis enim ridiculus porta vel, augue, lacus eu magna facilisis porta pulvinar in velit, integer, nunc placerat! Cras, vel phasellus ultrices vel purus ac sed turpis sagittis lacus penatibus tincidunt augue velit massa pulvinar pellentesque arcu ut dapibus mus ac ut parturient, platea, turpis porttitor massa porta tempor cursus! Lundium tincidunt? Quis amet ridiculus elementum scelerisque ac urna etiam mus augue turpis dapibus est platea ut velit adipiscing, tincidunt, tincidunt, etiam augue vut enim montes cursus rhoncus scelerisque, vel lorem egestas, tincidunt placerat scelerisque in urna tincidunt, porta. Nascetur? Et, odio, lundium ac, pellentesque? Eu mus, parturient montes habitasse.

Montes enim adipiscing. Integer! Dictumst et, ac ac, pid nunc vut, pulvinar adipiscing proin risus, cursus lundium, sed! Egestas? Placerat, sed ridiculus, urna! Rhoncus cursus a mauris, duis lundium, porttitor aliquam, nascetur magnis, porttitor integer phasellus sed. Diam eros ultricies et! Arcu magna. Pid. Enim parturient, nisi, etiam nisi integer cursus, adipiscing facilisis. Aliquet? Aenean, magnis phasellus. Lundium et, lorem et! Arcu est nec enim, amet scelerisque et? Sagittis. Turpis, phasellus adipiscing enim in. Amet! Integer lectus porttitor eu, rhoncus. Placerat nunc pid in elementum dignissim mus ut ac, augue lorem vel purus elit! Tristique elit, placerat sit ridiculus, dictumst sagittis tincidunt nec nascetur, vut a a pulvinar. Lacus nunc vut ut sit montes enim, ultrices, urna cras duis.Adipiscing nunc dapibus pellentesque! Augue vut ultrices proin scelerisque tortor phasellus ut, et. Magna magna ac, tortor proin? Purus, dolor amet duis enim ridiculus porta vel, augue, lacus eu magna facilisis porta pulvinar in velit, integer, nunc placerat! Cras, vel phasellus ultrices vel purus ac sed turpis sagittis...

CSS

section {
    background:blue;
}

#nav {
    background:white;
    height:100px;
}

.sticky-wrapper {
    position:relative;
}

.left, .right {
    position:absolute;
}

.left {
    left:0;
}

.right {
    right:0;
}

.stuck {
    position:fixed;
    width:100%;
    top:0;
}

JavaScript

// Generated by CoffeeScript 1.4.0
/*
jQuery Waypoints - v2.0.2
Copyright (c) 2011-2013 Caleb Troughton
Dual licensed under the MIT license and GPL license.
https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt
*/
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(this,function(n,r){var i,o,l,s,f,u,a,c,h,d,p,y,v,w,g,m;i=n(r);c=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;a={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};t.data(u,this.id);a[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||c)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(c&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return...