Question

当视口大于某个宽度时，有没有办法只运行WayPoints？最好在调整大小时检查宽度是否会改变？

通常我会离开这个，但我有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()方法，它会比绑定到窗口大小调整事件更好。然后你可以启用/禁用waypoint插件。顺便说一句，你应该使用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).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"); 
            }
        }
    });
});

如果视口宽度大于1000px，则仅运行WayPoints？

2 个答案: