div内側のdiv要素をフェードアウト

Question

次のようなフィドルが出てきて、要素が1つ上に向かって消えるようになりました。

JavaScriptを実行することにより：

$(window).scroll(function() { 
    $('[id^="box"]').each(function() { 
     if (($(this).offset().top - $(window).scrollTop()) < 20) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
}); 

http://jsfiddle.net/JdbhV/6/

をのみ、これは完全なウィンドウに取り組んでいる、私はそれはdivタグに仕事をしたいです。だから私は、代わりに、ウィンドウのdiv要素をつかむためにはJavaScriptを変更し、その後、divのテストとそこに内部の他のすべてのdivを追加するためにバイオリンを修正：

$("#test").scroll(function() { 
    $('[id^="box"]').each(function() { 
     if (($(this).offset().top - $("#test").scrollTop()) < 20) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
}); 

http://jsfiddle.net/JdbhV/1692/

しかし今、彼らはあまりにも速くていないフェード彼らがdivの一番上に到達したとき。

誰かがここで間違っているポインタを持っていますか？

Answer 1

.offset（）メソッドは、私たちはに対する要素の現在位置を取得することができドキュメント。

ウィンドウをスクロールしても、ドキュメント内の要素の位置は変更されませんが、別の要素内のスクロール要素は変更されません。これにより、オフセット位置が変更され、ボックスがスクロールビューの最上部にあるかどうかを確認するチェックがスローされます。

.position()の方法を使用して、親に対して相対的な位置を取得してみてください。ここで

$("#test").scroll(function() { 
    $('[id^="box"]').each(function() { 
      //When the top of the square goes above the top of the scroll element, fade it out 
     if ($(this).position().top < 0) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
}); 

http://jsfiddle.net/ys0m6axL/

Answer 2

なぜなら、jQueryはdivを透明にしているからです。しかしdivはまだそこにあり、それは彼らの高さがまだカウントすることを意味します。

この場合、特に必要なのは減算だけです。 divの高さ（100px）とdiv間のスペース（100pxも含む）の高さから20を引いた値を使用すると、各div（およびその周りのスペース）の合計が200pxになります。

以下のコードを試して、動作するかどうかを確認してください。

$("#test").scroll(function() { 
    $('[id^="box"]').each(function() { 
     if (($(this).offset().top - $("#test").scrollTop()) < 20 - $(this).index() * 200) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
}); 

幸運。

Answer 3

divの代わりにscrollTopを使用してみてください。

私はこの行に計算を変更した：

if (($(this).offset().top - $("#test").offset().top) < 20) { 

はJSFIDDLE：http://jsfiddle.net/JdbhV/1697/

$("#test").scroll(function() { 
    $('[id^="box"]').each(function() { 
      if (($(this).offset().top - $("#test").offset().top) < 20) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
}); 

Answer 4

jsfiddle例です。

は、あなただけの

$(this).offset().top < $("#test").offset().top 

$（ "＃テスト"）に

$(this).offset().top - $("#test").scrollTop()) < 20 

から条件 を変更する必要があります。）（オフセット。 トップが何をしたときに決める高さフェード動作。
これは今のところコンテナの上部です＃テスト。