我已经使用过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/