Waypoints

Waypoint.Group Class

Every waypoint belongs to a Group. A Group serves as a logical separation of groups of waypoints that comes into play with group-dependent options and methods, such as the continuous option, next method, and previous method. Groups also ensure the correct trigger order of waypoints when multiple waypoints are crossed in one check.

When a Context listening for scroll and resize events sees that a waypoint has been crossed, it doesn't immediately trigger it. Instead, it registers the waypoint as triggered with that waypoint's Group. When the context is done with its checks, groups with marked waypoints go through the process of sorting the triggered waypoints and filtering them according to the continuous option.

Groups are automatically created through the use of the group option. Because of this, you should not instantiate this class directly. Instead, a group should be accessed using a waypoint's group property.

Properties

axis

Groups only operate on a single axis. That means if you create a vertical Waypoint with a group name of "foo", and create a horizontal one with the same group name, you'll end up creating two different groups. They share the same name, but have a different axis.

var waypoint = new Waypoint({
  element: document.getElementById('group-axis-example'),
  handler: function(direction) {
    notify('Axis: ' + this.group.axis)
  },
  offset: '50%'
})

name

The name property for a group is identical to the string provided as the group option.

var waypoint = new Waypoint({
  element: document.getElementById('group-name-example'),
  handler: function(direction) {
    notify('Name: ' + this.group.name)
  },
  group: 'custom-group',
  offset: '50%'
})

waypoints

The waypoints property is an array of the Waypoint instances that belong to this group. Beware that while the first, last, previous, and next methods guarantee the result comes from a properly sorted waypoint array, this property may be unsorted at any given time.

var waypoint = new Waypoint({
  element: document.getElementById('group-waypoints-example'),
  handler: function(direction) {
    notify('Group waypoint count: ' + this.group.waypoints.length)
  },
  group: 'custom-group',
  offset: 'bottom-in-view'
})