Waypoints

Waypoint.Context Class

Every waypoint belongs to a Context. A Context is a wrapper around a scrollable DOM element (or window), and there is always only one Context for any element. Contexts are only created for an element if a Waypoint is created with that element supplied as the context option. Because Waypoint creation automatically drives Context creation, you never need to instantiate this class directly. Instead, instances of this class should be retrieved through a waypoint's context property, or by using Waypoint.Context.findByElement.

Properties

adapter

This property gives you the instance of the adapter wrapped around the DOM element of this context. 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.

var waypoint = new Waypoint({
  element: document.getElementById('context-adapter-example'),
  handler: function(direction) {
    notify('Scrolltop value: ' + this.context.adapter.scrollTop())
  },
  offset: '25%'
})

element

This property gives you the underlying DOM element (or window, in the default case) of the context.

var waypoint = new Waypoint({
  element: document.getElementById('context-element-example'),
  handler: function(direction) {
    notify('Context element: ' + this.context.element)
  },
  offset: '25%'
})

waypoints

The waypoints property is an object with two properties, horizontal and vertical. Each of those properties are themselves objects containing all the horizontal and vertical waypoints in the context respectively. The keys of those objects are a unique internal id assigned to a waypoint, and the values are the Waypoint instances themselves. The whole object might look like this at any given time:

{
  horizontal: {
    'waypoint-key-24': (a Waypoint instance)
  },
  vertical: {
    'waypoint-key-4': (a Waypoint instance),
    'waypoint-key-5': (a Waypoint instance)
  }
}

Let's look at the waypoints property on the window context for this page.

var waypoint = new Waypoint({
  element: document.getElementById('context-waypoints-example'),
  handler: function(direction) {
    for (var axis in this.context.waypoints) {
      for (var waypointKey in this.context.waypoints[axis]) {
        notify([
          axis,
          waypointKey,
          this.context.waypoints[axis][waypointKey].element.id
        ].join(' / '))
      }
    }
  },
  offset: 'bottom-in-view'
})