7

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. What can I try next?

halfer
  • 19,824
  • 17
  • 99
  • 186
Snæbjørn
  • 10,322
  • 14
  • 65
  • 124

1 Answers1

12

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.

Marc
  • 746
  • 1
  • 12
  • 28
James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • 1
    Many thanks! I prefer using offset: 'bottom-in-view' instead as it's more "readable" :) – Snæbjørn Jul 13 '12 at 14:04
  • @Snæbjørn - You're welcome, glad I could help :) Oh yeah, I didn't read enough of the docs to notice that... definitely better to use that than `100%`. – James Allardice Jul 13 '12 at 14:05