Basic Waypoint usage

17,643

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.

Share:
17,643
Snæbjørn
Author by

Snæbjørn

Updated on June 04, 2022

Comments

  • Snæbjørn
    Snæbjørn about 2 years

    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.