Skip to content

Instantly share code, notes, and snippets.

@imakewebthings
Created October 10, 2011 12:20
Show Gist options
  • Save imakewebthings/1275165 to your computer and use it in GitHub Desktop.
Save imakewebthings/1275165 to your computer and use it in GitHub Desktop.
$(document).ready(function() {
$.waypoints.settings.scrollThrottle = 30;
$('#main').waypoint(function(event, direction){
/* Just as we have a sticky class applied when we hit the top waypoint,
we'll have a different class applied when we bottom out */
if (direction === 'down') {
$(this).removeClass('sticky').addClass('bottomed');
}
else {
$(this).removeClass('bottomed').addClass('sticky');
}
}, {
offset: function() {
/* This is the key and maybe a little tricky to figure out at first.
If a 0 offset is the top of #main hitting the top of the viewport, then
#main's height * -1 is the bottom of main reaching the top of the viewport.
What we want is the bottom of main to hit the bottom of #sideport, so we
just add #sideport's height. -1 * height(#main) + height(#sideport) is
mathematically equivalent to what's below. In general it's nice to learn
(because I hadn't tried to figure this out before) that if you want a
waypoint to trigger when the bottom of the element reaches the bottom of
any other (fixed) element, just take the difference in their heights. */
return $('#sideport').outerHeight() - $(this).outerHeight();
}
}).find('#main-nav-holder').waypoint(function(event, direction) {
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
});
/*
You'll need styles for the bottomed class. I believe this is all that's required:
.bottomed #sideport {
position:absolute;
bottom:0;
right:0;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment