Waypoints 构建 non-jQuery/framework

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 版本。

所以我的问题是，我如何 format/write 在 noframework 构建中使用上述代码？

我已经受够了 jQuery，所以下面的示例代码对我来说完全陌生！

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

我如何在 中编写我的 jQuery 脚本，我猜 是普通的 javascript？有人可以对此有所了解吗？

提前致谢！

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

Waypoints 构建 non-jQuery/framework

Waypoints with non-jQuery/framework build

javascript

jquery

jquery-waypoints