ビューポートの幅が1000pxより大きい場合にのみWayPointを実行しますか？

Question

ビューポートが特定の幅よりも大きい場合にのみWayPointを実行する方法はありますか？好ましくは、その幅がサイズ変更されるかどうかを確認する

通常はこのままにしておきますが、4つのセクションがあり、それらが表示されるときには.in-viewのクラスを追加してdiv内をアニメーション化できます。問題は（私は）モバイルでは私のセクションがスライドショー（Slickスライダ）で表示されるので、.slick-currentに同じアニメーション/トランジションスタイリングがあり、時には機能しないことがあります。なぜなら、要素を.in-viewに設定している可能性が高いからです？

$(document).ready(function(){ 
    var waypoints = document.querySelectorAll('.showcase__item'); 
    for (var i = waypoints.length - 1; i >= 0; i--) { 
     var waypoint = new Waypoint({ 
      element: waypoints[i], 
      handler: function(direction) { 
       this.element.classList.toggle('in-view'); 
      }, 
      offset: '60%', 
     }); 
    } 
}); 

...この可能ですそれも良いアイデアです：

これは私が使用しているコードはありますか？これがパフォーマンスにどのようにストレスを与えるのか分かりませんか？

Answer 1

$(window).resize()と$(window).width();を確認できます。 $(window).resize()イベントは、ブラウザウィンドウのサイズが変更されたときにウィンドウ要素に送信され、$(window).width();はウィンドウの現在の幅を取得します。ここにコードのスニペットがあります。

$(document).ready(function(){ 
    $(window).resize(function() { 
     width=$(window).width(); 
     if (width > 1000){ 
      var waypoints = document.querySelectorAll('.showcase__item'); 
      for (var i = waypoints.length - 1; i >= 0; i--) { 
       var waypoint = new Waypoint({ 
        element: waypoints[i], 
        handler: function(direction) { 
         this.element.classList.toggle('in-view'); 
        }, 
        offset: '60%', 
       }); 
      } 
     } else { 
      // Your logic when the screen size is less then 1000 px. 
      if ($("#someID").hasClass("classname")) { 
       $("#someID").removeClass("classname"); 
      } 
     } 
    }); 
}); 

Answer 2

私は本当にこのプラグインを知りませんが、それはwindow.matchMedia().addListener()メソッドを使用して可能になり、それがイベントのサイズを変更するウィンドウに結合するよりも良いだろう。次に、ウェイポイントプラグインを有効/無効にすることができます。ところで、jQueryの方法でプラグインを初期化する必要があります。次のコードは、テストされていない

：

var widthMatch = window.matchMedia("(min-width:1000px)"); 
var waypoints; 

widthMatch.addListener(function(e) { 
    switchWayPoints(e.matches); 
}); 

function switchWayPoints(enable) { 
    waypoints[enable ? "enableAll" : "disableAll"](); 
} 

$(document).ready(function() { 
    waypoints = $('.showcase__item').waypoint(function(direction) { 
    // -> Seem strange to call it here without any direction check?! ->$(this).toggleClass('in-view'); 
    }, { 
    offset: '60%' 
    }); 

    switchWayPoints(widthMatch.matches); 
});