我在页面上有多个部分,ID为ss-section-story
ss-section-problem
ss-section-solution
,我试图跟踪每个部分何时进入和退出视口。问题是,使用当前代码,我只跟踪标识为ss-section
的第一部分。我希望能够跟踪进入和退出的每个部分。
JS
var inview = new Waypoint.Inview({
element: $('section[id^="ss-section"]')[0],
enter: function(direction) {
console.log(this.element.id + ' enter');
},
entered: function(direction) {
console.log(this.element.id + ' entered');
},
exit: function(direction) {
console.log(this.element.id + ' exit');
},
exited: function(direction) {
console.log(this.element.id + ' exited');
}
})
我知道它必须只跟踪第一部分,因为在element
选项中它被限制在该数组中的[0]
但是当我删除它时,我将在那些console.log语句中得到未定义。
我希望能够做到这一点但是这样但从文档判断,它没有这样的语法:
$('section[id^="ss-section"]').Waypoint.Inview({
enter: function(direction) {
console.log(this.element.id + ' enter');
},
entered: function(direction) {
console.log(this.element.id + ' entered');
},
exit: function(direction) {
console.log(this.element.id + ' exit');
},
exited: function(direction) {
console.log(this.element.id + ' exited');
}
})
有关如何仅使用Waypoint.Inview
答案 0 :(得分:0)
首先,你可以进行收集:
var $collection = $('section[id^="ss-section"]');
然后你通过它进行迭代:
$collection.each(function () {
new Waypoint.Inview({
element: this,
enter: function(direction) {
console.log(this.element.id + ' enter');
},
entered: function(direction) {
console.log(this.element.id + ' entered');
},
exit: function(direction) {
console.log(this.element.id + ' exit');
},
exited: function(direction) {
console.log(this.element.id + ' exited');
}
})
})
这就是全部。至少它对我有用。