Waypoints with non-jQuery/framework build

Question

I've used waypoints.js a few times before to great success. Using code like the example below:

$(document).ready(function() {

    $('.section').waypoint(function() {
        $(this).toggleClass('in-view');
    },
    {offset: '65%'});
});

That was created using version jQuery Waypoints - v2.0.3. I'm trying to use the same code on a website I've inherited which uses Waypoints 4.0.1 but the above code doesn't work and I think that's because the script is the non-jQuery version.

So my question is, how would I format/write the above code in a noframework build?

I struggle enough with jQuery so code the the example below is totally foreign to me!

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

How would I write my jQuery script in what I guess is plain javascript? Can someone shed some light on this please?

Thanks in advance!

Answer 1

The equivalent would be something like the following:

var waypoints = document.querySelectorAll('.section');
for (var i = waypoints.length - 1; i >= 0; i--) {
    var waypoint = new Waypoint({
        element: waypoints[i],
        handler: function(direction) {
            this.element.classList.toggle('in-view');
        },
        offset: '65%',
    });
}

The Waypoint documentation is quite descriptive here: http://imakewebthings.com/waypoints/guides/getting-started/

Update: Codepen example