Waypoints

Waypoints is the easiest way to trigger a function when you scroll to an element.

GitHub Waypoints

A basic Waypoint

We create waypoints by instantiating this class. When creating a new Waypoint we must pass it an options object. There are many properties you can set on this options object, but two of them are required, element, and handler.

var waypoint = new Waypoint({
  element: document.getElementById('basic-waypoint'),
  handler: function() {
    notify('Basic waypoint triggered')
  }
})

Directions with offset

What if we want to perform different actions when scrolling up, or limit our handler to one direction? When a waypoint is triggered, the handler function is passed a direction parameter. By default a waypoint triggers when the top of the element hits the top of the window.

var waypoint = new Waypoint({
  element: document.getElementById('direction-waypoint'),
  handler: function(direction) {
    notify('Direction: ' + direction)
  },
  offset: 20 
})