gistfile1.js

$(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;
}
*/