0
任何人都可以提供一些建议吗？我有以下代码来检测物品何时位于视口中，不幸的是，第一个.each循环（不是由滚动触发的）会为每个物品返回可见，这是为什么？在视口中可见，正在加载的所有内容都可见
window.onload = function(){
$.fn.visible = function(detectPartial){
detectPartial = (!!detectPartial); // if null or undefined, default to false
var viewport = $(window),
vpWidth = viewport.width(),
vpHeight = viewport.height(),
vpTop = viewport.scrollTop(),
vpBottom = vpTop + vpHeight,
vpLeft = viewport.scrollLeft(),
vpRight = vpLeft + vpWidth,
elementOffset = $(this).offset(),
elementTopArea = elementOffset.top+((detectPartial) ? $(this).height() : 0),
elementBottomArea = elementOffset.top+((detectPartial) ? 0 : $(this).height()),
elementLeftArea = elementOffset.left+((detectPartial) ? $(this).width() : 0),
elementRightArea = elementOffset.left+((detectPartial) ? 0 : $(this).width());
return ((elementBottomArea <= vpBottom) && (elementTopArea >= vpTop)) && ((elementRightArea <= vpRight) && (elementLeftArea >= vpLeft));
}
$('.portfolio-image-box').each(function(i, el){
var el = $(el);
if (el.visible(true)) {
el.addClass("in")
} else{
el.addClass("out")
}
})
$(document).scroll(function() {
$('.portfolio-image-box').each(function(i, el){
var el = $(el);
if (el.visible(true)) {
el.removeClass("out")
el.addClass("in")
} else{
el.removeClass("in")
el.addClass("out")
}
})
})
}
你能给我们一些HTML或小提琴的我们来测试代码？ –
https://jsfiddle.net/dancinwolfe/7fydgdL3/4/我认为这是正确的，不得不把混乱的HTML和CSS一点点，因为我使用laravel和bootstrap。 –
谢谢你看它 –