Waypoints Inview を使用して、Web サイトの特定のセクションにスクロールしたことを検出し、表示されている 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');
}
}
}
});
});