Waypoints

continuous option

The continuous option applies when a single scroll event would trigger multiple waypoints. A common case for this is if you're linking to a page fragment further down the page. In this first example, we have waypoints with continuous set to the default of true. If you click the link to jump past them you'll see they all trigger in order.

var continuousElements = document.getElementsByClassName('continuous-true')
for (var i = 0; i < continuousElements.length; i++) {
  new Waypoint({
    element: continuousElements[i],
    handler: function() {
      notify(this.element.innerHTML + ' hit')
    }
  })
}

Jump Past Continuous Waypoints

If we set all of these waypoints to continuous: false and make the same jump you'll see only the last waypoint is triggered.

var discreteElements = document.getElementsByClassName('continuous-false')
for (var i = 0; i < discreteElements.length; i++) {
  new Waypoint({
    element: discreteElements[i],
    handler: function() {
      notify(this.element.innerHTML + ' hit')
    },
    continuous: false
  })
}

Jump Past Non-Continuous Waypoints

Continuous is a property that is evaluated in the context of a waypoint's group. That is, if you cross multiple waypoints and they all have continuous set to false, but belong to different groups, they will all still fire. The last waypoint for each group is triggered. In the example below we have two different waypoint groups, both containing all waypoints with continuous false. You'll see the last waypoint from each group fires when making the jump.

var leftElements = document.getElementsByClassName('continuous-group-left')
for (var i = 0; i < leftElements.length; i++) {
  new Waypoint({
    element: leftElements[i],
    handler: function() {
      notify(this.element.innerHTML + ' hit')
    },
    continuous: false
  })
}

var rightElements = document.getElementsByClassName('continuous-group-right')
for (var i = 0; i < rightElements.length; i++) {
  new Waypoint({
    element: rightElements[i],
    handler: function() {
      notify(this.element.innerHTML + ' hit')
    },
    continuous: false
  })
}

Jump Past Waypoint Groups

It's easy to think about continuous in the following way: If we cross a bunch of waypoints in one scroll, only trigger the last one. This can be the case if every waypoint has continuous set to false, but it isn't exactly what's happening. Continuous is a property of an individual waypoint, and whether that waypoint is triggered is dependent only on its own continuous setting and not that of other triggered waypoints. The more accurate way to think of continuous is: If this waypoint was crossed and its continuous setting is false, only trigger its handler if it was the last waypoint crossed in its group.

That's a dense bunch of text for a simple example. Here we have a bunch of waypoints with continuous false, except for two in the middle with continuous true. You'll notice the jump causes the last non-continuous waypoint to fire, as well as the continuous waypoints in the middle.

var continuousElements = document.getElementsByClassName('continuous-mix-true')
for (var i = 0; i < continuousElements.length; i++) {
  new Waypoint({
    element: continuousElements[i],
    handler: function() {
      notify(this.element.innerHTML + ' hit')
    },
    offset: 'bottom-in-view'
  })
}

var discreteElements = document.getElementsByClassName('continuous-mix-false')
for (var i = 0; i < discreteElements.length; i++) {
  new Waypoint({
    element: discreteElements[i],
    handler: function() {
      notify(this.element.innerHTML + ' hit')
    },
    offset: 'bottom-in-view',
    continuous: false
  })
}

Jump Past Mixed Waypoints