我正在使用 Waypoints Inview 来检测当我滚动到我网站的某个部分时抓取 div 的背景颜色以查看它是什么颜色,然后我将一个类输出到我的导航上以更改颜色。
它在桌面上运行良好,但在移动设备上,它只有在用户停止滚动时才会触发,这使得它看起来无法正常工作。现在我知道您可以使用“touchmove”,但我不知道如何使用 Waypoints Inview 进行操作。
我很确定我已经到处寻找答案,但似乎无法弄清楚。
我已经包含了一个 JSFiddle 来向您展示我正在尝试完成的导航如何更改的基本版本,以便您可以在背景中看到它。我只需要一种让它立即在移动设备上运行的方法,而不是在你停止滚动后。
谢谢,
$('.section')
.each(
function(index){
var wayPointsEl = $('.nav');
var sectionObj = $(this);
var inview = new Waypoint.Inview({
element: sectionObj,
enter: function(direction) {
if(direction == 'up') {
if(sectionObj.hasClass('dark')) {
wayPointsEl.removeClass('dark');
wayPointsEl.addClass('light');
} else if(sectionObj.hasClass('light')) {
wayPointsEl.removeClass('light');
wayPointsEl.addClass('dark');
}
}
},
exit: function(direction) {
if(direction == 'down') {
if(sectionObj.hasClass('dark')) {
wayPointsEl.removeClass('dark');
wayPointsEl.addClass('light');
} else if(sectionObj.hasClass('light')) {
wayPointsEl.removeClass('light');
wayPointsEl.addClass('dark');
}
}
}
});
});