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. Please help.

Community
  • 1
  • 1
Snæbjørn
  • 9,498
  • 13
  • 58
  • 109

1 Answers1

11

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
  • 698
  • 1
  • 11
  • 26
James Allardice
  • 160,885
  • 21
  • 326
  • 309
  • 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