Waypoints

jQuery/Zepto

Prior to version 3.0, Waypoints was strictly a jQuery plugin. You'll notice most of the examples on this site use code that is compatible with the new no-framework build of Waypoints using class instantiation and generally available DOM querying methods, like this:

var waypoint = new Waypoint({
  element: document.getElementById('new-operator'),
  handler: function(direction) {
    notify(this.id + ' hit')
  }
})

If you're using the jQuery or Zepto builds, you can still use the no-framework approaches featured in the documentation, but those builds also provide extensions specific to the framework.

$.fn.waypoint

A waypoint method is added to $.fn, restoring the old 2.x syntax. Instead of passing in an element option, a waypoint is created for each of the matched elements.

var waypoints = $('#options-only').waypoint({
  handler: function(direction) {
    notify(this.element.id + ' hit')
  }
})

You may also pass the handler option as the first argument to waypoint.

var waypoints = $('#handler-first').waypoint(function(direction) {
  notify(this.element.id + ' hit 25% from top of window') 
}, {
  offset: '25%'
})

In the example above, the element option is replaced with the element matched by the selector, and the handler option is provided as the first paramter. Because there are no other required options, the second options argument becomes optional. In this case, all other options would be the defaults.

var waypoints = $('#handler-only').waypoint(function(direction) {
  notify(this.element.id + ' hit') 
})

There is one major difference between using the $.fn.waypoint method with versions 2.0 and 3.0. In 2.0, the same jQuery object was returned for chaining purposes, as is common among core jQuery methods. In 3.0, an array of Waypoint instances is returned.

Context Option

The context option expects its value to be an HTMLElement (or window.)

var waypoint = new Waypoint({
  element: document.getElementById('context-example'),
  handler: function() {
    notify('Context example triggered')
  },
  context: document.getElementById('overflow-scroll')
})

With jQuery and Zepto builds, you may also pass a CSS selector string. If you do, Waypoints will find the context element using closest with that selector.

var waypoints = $('#context-example-offset').waypoint({
  handler: function() {
    notify('Hit midpoint of my context')
  },
  context: '#overflow-scroll-offset',
  offset: '50%'
})