Using a base waypoint

Question

I am trying to use the Waypoints plugin for jQuery for lazy loading elements in a webpage. However, I cannot get it to work. :(

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

According to the waypoint 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 is not as simple as it seems. Please, help.

Answer 1

Plugin documents expose the offset parameter, which performs the following actions:

Determines how far the top of the element should be from the top of the browser window to trigger the waypoint. This can be a number that is like the number of pixels, a string representing a percentage of the height of the viewport, or a function that returns a few pixels.

You can pass parameters to the waypoint method as a second argument:

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

Here is the update script .