Basic Waypoint usage

Question

I'm trying to use the Waypoints plugin for jQuery to lazy load elements on a webpage. However I can't get it to work. :(

I made a very basic example: http://jsfiddle.net/P3XnN/2/

According to the Waypoints documentation all I need to do is the following.

JS:

$('#waypoint').waypoint(function() {
   alert('You have scrolled to my waypoint.');
});

HTML:

<div style="height: 500px">Scroll down</div>
<div id="waypoint">Waypoint</div>

But it isn't as simple as that apparently. Please help.

Answer 1

The plugin docs reveal an offset option that does the following:

Determines how far the top of the element must be from the top of the browser window to trigger a waypoint. It can be a number, which is taken as a number of pixels, a string representing a percentage of the viewport height, or a function that will return a number of pixels.

You can pass options to the waypoint method as the 2nd argument:

$('#waypoint').waypoint(function() {
    alert('You have scrolled to my waypoint.');
}, {
    offset: '100%'
});

Here's an update fiddle. Updated broken CDN resource 2022.