获取Waypoint Inview可在移动设备上滚动时使用

时间:2016-01-15 15:29:37

标签: jquery jquery-mobile mobile jquery-waypoints touchmove

我正在使用Waypoints Inview来检测我何时滚动到我网站的某个部分,抓住div中的背景颜色查看它是什么颜色然后我在我的导航中输出一个类来改变颜色。< / p>

它在桌面上运行得非常好但是当涉及到移动设备时它只会在用户停止滚动时触发,这使得它看起来不能正常工作。现在我知道你可以使用'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');

              }
            }
          }
        });

     }); 

0 个答案:

没有答案