Waypoints

context option

The context option defines which scrollable element the waypoint acts within. This is perhaps easiest to explain by example, so let's look at one. Here we have the following HTML, CSS, and JavaScript:

<div id="overflow-scroll">
  <div id="context-example">I am a waypoint with a custom context, the "#overflow-scroll" div.</div>
</div>

#overflow-scroll {
  overflow:scroll;
  height:300px;
  background:#aaa;
}

#context-example {
  background:#555;
  color:#fff;
  height:600px;
  margin-top:150px;
}

var waypoint = new Waypoint({
  element: document.getElementById('context-example'),
  handler: function() {
    notify('Context example triggered')
  },
  context: document.getElementById('overflow-scroll')
})

This results in…

As you can see, this waypoint handler is triggered when the top of the element hits the top of its context element. The default of window covers the most common case, the user is scrolling the window and we want to react to an element's position in relation to the top of the window.

The other part of this equation, where the waypoint triggers, can be controlled with the offset option. As with the default of window, this offset is calculated in relation to the context. For example, an offset of '50%' will trigger when the top of the element hits the midpoint in the context's height.

var waypoint = new Waypoint({
  element: document.getElementById('context-example-offset'),
  handler: function() {
    notify('Hit midpoint of my context')
  },
  context: document.getElementById('overflow-scroll-offset'),
  offset: '50%'
})

If you're using the jQuery or Zepto builds of Waypoints, you can pass a CSS selector string as the context option, instead of an HTMLElement, and Waypoints will call closest to find the context element.

$('.some-element').waypoint(function(direction) {
  // do things
}, {
  context: '.scrollable-element'
})