2

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

              }
            }
          }
        });

     }); 
4

0 に答える 0