jquery - 在移动设备上滚动时让 Waypoints Inview 工作

Question

我正在使用 Waypoints Inview 来检测当我滚动到我网站的某个部分时抓取 div 的背景颜色以查看它是什么颜色，然后我将一个类输出到我的导航上以更改颜色。

它在桌面上运行良好，但在移动设备上，它只有在用户停止滚动时才会触发，这使得它看起来无法正常工作。现在我知道您可以使用“touchmove”，但我不知道如何使用 Waypoints Inview 进行操作。

我很确定我已经到处寻找答案，但似乎无法弄清楚。

• Waypoints Inview 插件

我已经包含了一个 JSFiddle 来向您展示我正在尝试完成的导航如何更改的基本版本，以便您可以在背景中看到它。我只需要一种让它立即在移动设备上运行的方法，而不是在你停止滚动后。

• 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');

              }
            }
          }
        });

     });