Получение путевых точек Inview для работы при прокрутке на мобильном телефоне
Я использую 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');
}
}
}
});
});