2

我正在使用 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');

              }
            }
          }
        });

     }); 
4

0 回答 0