[英]Only run WayPoints if viewport width is greater than 1000px?
有没有一种方法只能在视口大于特定宽度时运行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%',
});
}
});
这有可能吗...甚至是个好主意吗? 不确定这会对性能造成多大压力?
我真的不知道这个插件,但是可以使用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);
});
您可以检查$(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");
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.