Waypoints

waypoint.previous()

When you're inside a waypoint handler, it is sometimes useful to know what the previous or next waypoint is in relation to the current one being triggered. The next and previous functions servce that purpose.

These methods act within the scope of the waypoint's group, which is set on initialization using the group option. In older versions of Waypoints, when there was no Group concept, calling next or previous ran the risk of returning a logically unrelated waypoint that just happened to be at the nearest trigger point.

In the example below, we can see next and previous in action, as well as how grouping effects them. There are two groups. The most recently triggered waypoint in each group is highlighted green. The previous waypoints are highlighted in red, next waypoints in blue. This example will use jQuery to mess with the DOM, for brevity, but still utilizes the no-framework build of Waypoints.

$.each(['np-left', 'np-right'], function(i, classname) {
  var $elements = $('.' + classname)

  $elements.each(function() {
    new Waypoint({
      element: this,
      handler: function(direction) {
        var previousWaypoint = this.previous()
        var nextWaypoint = this.next()

        $elements.removeClass('np-previous np-current np-next')
        $(this.element).addClass('np-current')
        if (previousWaypoint) {
          $(previousWaypoint.element).addClass('np-previous')
        }
        if (nextWaypoint) {
          $(nextWaypoint.element).addClass('np-next')
        }
      },
      offset: '30%',
      group: classname
    })
  })
})