Jquery waypoint event doesn't fire on elements at the bottom of the page

Question

I'm trying to use the jquery-waypoint plugin to fire an event when the footer comes in/out of viewport.

I've created an example on jsfiddle but the event won't fire on the footer element.

Any suggestions?

Answer 1

The event is not triggered because waypoint only triggers when the top of the scroll window has reached the waypoint. In your case the waypoint is never reached as your HR element can never be scrolled to the top of the window.

One way you can solve this is by giving an offset parameter to waypoint

$(document).ready(function() {
  $('hr').waypoint(function(event, direction) {
    alert(direction);
  }, {offset: 900});
});​

That will tell waypoint to fire the event 900px before it actually reached top of the scroll window. But that solution is not optimal as it will depend on the users screen resolution. You can test it by resizing your browser window size and see how it performs.

There is a better solution though. Not knowing what you want to achieve, I would suggest setting waypoint on the last article.