javascript - 具有非 jQuery/框架构建的路点

Question

我之前使用过 waypoints.js 几次，并取得了巨大的成功。使用如下示例的代码:

$(document).ready(function() {

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

它是使用版本 jQuery Waypoints - v2.0.3 创建的。我试图在我继承的使用 Waypoints 4.0.1 的网站上使用相同的代码，但上面的代码不起作用，我认为这是因为该脚本是非 jQuery 版本.

所以我的问题是，如何在 noframework 构建中格式化/编写上述代码？

我对 jQuery 已经很挣扎了，所以下面的示例代码对我来说完全陌生!

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

我如何用我猜的纯 JavaScript 编写 jQuery 脚本？有人可以解释一下吗？

提前致谢!

Answer 1

等效的内容如下:

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%',
    });
}

Waypoint 文档在这里非常具有描述性:http://imakewebthings.com/waypoints/guides/getting-started/

更新: Codepen example