Waypoints - Easiest way to trigger a function

Waypoints is the easiest way to trigger a function when you scroll to an element.

var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!')
  }
})

Builds are available for multiple DOM libraries.

Shortcuts

In addition to the normal Waypoints script, extensions exist to make common UI patterns just a little easier to implement:

• Infinite Scrolling
• Sticky Elements
• Inview Detection

Source: github.com

1. INCLUDE JS FILES

<script src="/path/to/noframework.waypoints.min.js"></script>

2. HTML

<div class="waypoint" id="basic-waypoint">

</div>

3. JAVASCRIPT

var waypoint = new Waypoint({
  element: document.getElementById('basic-waypoint'),
  handler: function() {
    notify('Basic waypoint triggered')
  }
})

More information here: https://imakewebthings.com/waypoints/api/waypoint/