Waypoints are created by instantiating this class. How you instantiate a waypoint depends on which build you use (jQuery, Zepto, or no-framework dependency.) All builds support instantiation using
new on the globally exposed
If you're using the jQuery or Zepto builds, extensions for those frameworks are provided to match the framework style. A
waypoint method is exposed on the jQuery/Zepto prototypes.
handler is the only required property.
In the example above,
waypoints will be an array of Waypoint instances, one for each of the elements matching the selector. In this case, an array containing only one waypoint using the lone
#options-only element. Notice that the
element option is no longer needed with the jQuery or Zepto builds, as elements are provided by the matched selector.
The jQuery and Zepto builds also allow you to pass the handler as the first argument to
handler: The handler option function.
options: An optional object containing Waypoints options.
In this method signature, because the matched selector removes the need for the
element option, and the first parameter takes care of the
handler option, there are no remaining required options properties and you can omit the
options parameter entirely if you want default behavior.
In the API navigation you'll find links to individual pages covering, in depth, the various options you can pass to the Waypoint constructor, as well as instance and class methods. A Waypoint instance also has a number of properties. Let's take a look at some of the more useful ones.
This property gives you the instance of the adapter wrapped around the DOM element of this waypoint. Most Waypoints users should use the element property to access this element, but
adapter is useful for developers writing Waypoints extensions or scripts that are intended to be used across all the different framework builds of Waypoints.
This property gives you the instance of Waypoint.Context that the waypoint belongs to.
Easily the most useful property of a waypoint is its DOM element. With this property we gain access to that element within the handler.
This property gives you the instance of Waypoint.Group that the waypoint belongs to. This property should be the only way you access a group.
options property of a waypoint is the result of merging the default options object with the options object passed in on instantiation. The properties of this object have little practical use inside a handler, but inspecting this object may be useful in debugging to ensure that the waypoint received the options you intended.
This property is the result of the most recent offset calculation. It is the scroll value, in pixels, where the handler triggers. In the simplest example, when the
offset is the default of 0,
triggerPoint will be identical to the element's offset top.
You should never set the
triggerPoint directly on a waypoint, but it is a useful property to inspect when debugging why a waypoint may not be triggering at the location you expect.