我已经使用过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脚本?有人可以对此有所启发吗?

提前致谢!

最佳答案

等效的内容如下所示:

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

关于javascript - 非jQuery/框架构建的航点,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47499053/

10-12 12:23
查看更多