Question

I’m trying to do the classic Sticky Element in reverse.

See http://imakewebthings.com/jquery-waypoints/sticky-elements/ for an example of a typical sticky experience.

What I want to do instead, is to have an element that initially docks flush with the bottom of the users window, and then stops and docks on the footer when he scrolls down that far. Is there a better way to initialize this plugin, or use another to accomplish this?

Answer 1

Following the documentation, it can be achieved as follows:

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

I assign .sticky to #footer-content initially (in the html).

See fiddle.