僅當視口寬度大於1000px時才運行WayPoint嗎？

Question

有沒有一種方法只能在視口大於特定寬度時運行WayPoint？ 最好檢查寬度是否在調整大小時發生變化？

通常我只剩下這部分，但是我有4個部分，當它們出現時，我在它們中添加了一個.in-view類，以便可以為其中的div設置動畫。 問題是（我認為），在移動設備上，我的節以幻燈片顯示（“滑動條”）顯示，因此我在.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.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);
});

Answer 2

您可以檢查$(window).resize()和$(window).width(); 。 當瀏覽器窗口的大小改變並且$(window).width();時， $(window).resize()事件發送到window元素$(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"); 
            }
        }
    });
});