誰かからアドバイスをいただけますか?残念ながら最初の.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/私はそれが正しいと思う、私はlaravelとブートストラップを使っていたので、ちょっとしたことをHTMLとCSSで混乱させなければならなかった。 –
ありがとうあなたはそれを見て –