ビューポートに画像が表示され、ビューポートに表示されないと消えます

Question

this fiddleでは、一度スクロールすると表示されますが、ビューポートから外に出ると消えます。

SCRIPT

$(document).ready(function() { 

/* Every time the window is scrolled ... */ 
$(window).scroll(function(){ 

    /* Check the location of each desired element */ 
    $('.hideme').each(function(i){ 

     var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it it */ 
     if(bottom_of_window > bottom_of_object){ 

      $(this).animate({'opacity':'1'},1500); 

     } 

    }); 

}); 

}）。

Answer 1

このような場合に役立つものは、すべての要素とすべての可能な状況の図です。

あなたはそれが完全に見え

• ot3 >= st
• とot2 < st+wh

だかどうかを確認したいのであれば、要素は

場合、ビューポートの内側になります

それとも、

• 場合、それは、少なくとも部分的に表示/消え
  • ot1+h1 > st
  • とot3+h3 < st+wh

  要素は、ビューポートの外になりますかどうかを確認したい場合ot1+h1 < st

• または
  • ot1、ot2、ot3offset().top
  • h1、h2、ビーイングot2 > st+wh

  h3outerHeight()

• st$(window).scrollTop()
• wh$(window).height()

もちろん、両方を確認する必要はありません。

var elemTop=$(this).offset().top; 
var elemHeight=$(this).outerHeight(); 
var scrollTop=$(window).scrollTop(); 
var winHeight=$(window).height(); 
if(elemTop>=scrollTop&&elemTop<scrollTop+winHeight) { 
    //fade in 
} else { 
    //fade out 
} 

幅と左オフセットを持つ水平スクロールの場合と同じです。

position()の代わりにoffset()を使用するのは、最後の要素が要素の親を基準にしているためです。

あなたのフィドラーに基づいて、アニメーションの前にstop()を使用して、新しいアニメーションを開始する前に現在のアニメーションを停止します。それ以外の場合、ユーザーが新しいアニメーションを発行する前にjQueryが各アニメーションを完了するため、ユーザーがスクロールして速くスクロールすると、オブジェクトが点滅し始めます。