Inview

This shortcut can be used with any build of Waypoints.

First, include the shortcut script after the main Waypoints script.

<script src="/path/to/lib/jquery.waypoints.min.js"></script>
<script src="/path/to/shortcuts/inview.min.js"></script>

The Inview shortcut gives you callbacks for various states of an element entering and exiting the viewport, no matter which side of the viewport it does it from. These callbacks are passed to Waypoint.Inview on instantiation.

var inview = new Waypoint.Inview({
  element: $('#inview-example')[0],
  enter: function(direction) {
    notify('Enter triggered with direction ' + direction)
  },
  entered: function(direction) {
    notify('Entered triggered with direction ' + direction)
  },
  exit: function(direction) {
    notify('Exit triggered with direction ' + direction)
  },
  exited: function(direction) {
    notify('Exited triggered with direction ' + direction)
  }
})

The callbacks options are exactly like the standard handler option. They are passed a direction parameter and the this keyword is the Inview instance. All of them are optional, so you can only use the callbacks you need for your use case. Let's look at where these callbacks are triggered and in what direction.

enter

Default: No-op function.

The enter callback is triggered when any piece of the element starts entering the viewport. It triggers with a 'down' direction when the top of the element hits the bottom of the viewport while scrolling down, and triggers with an 'up' direction when the bottom of the element hits the top of the viewport while scrolling up.

entered

Default: No-op function.

The entered callback is triggered when the entirety of the element has finished entering the viewport. It triggers with a 'down' direction when the bottom of the element hits the bottom of the viewport while scrolling down, and triggers with an 'up' direction when the top of the element hits the top of the viewport while scrolling up.

exit

Default: No-op function.

The exit callback is triggered when any piece of the element starts leaving the viewport. It triggers with a 'down' direction when the top of the element hits the top of the viewport while scrolling down, and triggers with an 'up' direction when the bottom of the element hits the bottom of the viewport while scrolling up.

exited

Default: No-op function.

The exited callback is triggered when the entirety of the element finishes leaving the viewport. It triggers with a 'down' direction when the bottom of the element hits the top of the viewport while scrolling down, and triggers with an 'up' direction when the top of the element hits the bottom of the viewport while scrolling up.

Other Options

context
enabled
horizontal

Other options are identical to the standard Waypoint options, and are passed along when creating the underlying Waypoint instances.

context

Default: window.

Used for specifying a scrollable element other than the window that this Inview instance should act within. See the standard context option for more information.

Default: true.

When set to false, all underlying Waypoint instances will start disabled. To enable the shortcut, you will need to call enable. See the standard enabled option for more information.

horizontal

Default: false.

When true, callbacks will work in the same fashion as a standard horizontal waypoint, dealing with left/right scrolls and passing 'right' or 'left' in place of 'down' and 'up'. See the standard horizontal option for more information.

Methods

destroy
disable
enable

The methods on an instance of Inview are identical to the standard Waypoint methods by the same names.

inview.destroy()

Calling destroy will destroy the four underlying waypoints that make up the shortcut and the callbacks will no longer be triggered.

$('.destroy-inview').on('click', function() {
  inview.destroy()
})

inview.disable()

Calling disable will temporarily disable the underlying waypoints until enable is called.

$('.disable-inview').on('click', function() {
  inview.disable()
})

inview.enable()

Calling enable will re-enable triggering of the Inview shortcut's handlers if it was previously disabled through the disable method or disabled option.

$('.enable-inview').on('click', function() {
  inview.enable()
})