我在页面上有一些元素。当它们滚动到 View 中时,我向它们添加动画类,如下所示:
$(window).scroll(function() {
var topOfWindow = $(window).scrollTop(),
bottomOfWindow = topOfWindow + $(window).height();
$('.buckle').each(function(){
var imagePos = $(this).offset().top;
if (imagePos < topOfWindow+400) {
$(this).addClass('animate');
}
});
});
Here's a stripped-down JSFiddle demo
这会触发动画在每次页面加载时发生一次:当图像距视口(viewport)顶部 400 像素时,添加类,动画滚动,然后图像保持静止。
但是现在,无论用户是向上滚动还是向下滚动,每次滚动到视口(viewport)时它们都会进行一次动画处理。在演示的情况下,“Buckle”元素在滚动出 View 后会丢失 .animate 类,并在滚动回 View 时重新应用它。
使用 JQuery 触发此操作的最有效方法是什么?
最佳答案
我不确定我是否完全理解你,但我认为从顶部触发动画 400px
不是一个好主意。如果窗口/视口(viewport)的高度甚至小于 400px
,动画将在滚动到 View 之前启动。我觉得应该通过windows底部来判断。
$(window).scroll(function () {
var topOfWindow = $(window).scrollTop(),
bottomOfWindow = topOfWindow + $(window).height();
$('.buckle').each(function () {
var imagePos = $(this).offset().top;
if(imagePos <= bottomOfWindow && imagePos >= topOfWindow){
$(this).addClass('animate');
}else{
$(this).removeClass('animate');
}
});
});
这是演示:http://jsfiddle.net/2LPmr/1/
干杯!
关于javascript - 每次元素滚动到视口(viewport)时触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22738674/