4

互いに下に複数の要素があります。これらの要素がウィンドウの上部にいつヒットしたかを確認したいと思います。単一の要素でそれを行う方法は知っていますが、複数の要素ではできません。

単一要素:

$(function(){   
var itemOffset = $('.test').offset().top;

$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop >= itemOffset){
        console.log("item has reached the top");
        }
});});

しかし今、クラス「テスト」を持つ5つの要素があります。そして、もし .test 要素が一番上に達したら、私はこう言いたいです: div 1 が一番上に達しました; div 2 がトップに達しました。など。したがって、それがどのdivであるかを確認する必要があります（属性IDなどを取得する可能性がありますか？）

これは私がこれまで持っていたものです。

$(function(){   
$('.test').each(function(){
    var itemOffset = $(this).offset().top;

    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        var toet = itemOffset - scrollTop;

        if(scrollTop >= itemOffset){console.log("New div has reached the top!")}
    });     
});});

助けていただければ幸いです。

4

2 に答える 2

2

一番上に到達したとはどういう意味か、少しあいまいです。つまり、スクロールして表示されなくなったのか、表示されているのか、それとも正確に一番上にあるのかということです。そうは言っても、答えが出たら数学は簡単だと思います。実際に必要なのは、スクロール関数内の各 div.test を確認することです。ログに記録する必要がある場合は、ID または内部テキストなどを取得できます。

これは、別の計算である完全に表示したい場合は、どの期間が表示されているかを示します。心に留めておかなければならないことの 1 つは、スクロール イベントが思ったよりも頻繁に発生することです。

$('#container').scroll(function(){
    $('.test').each(function(){
        var itemOffset = Math.abs($(this).offset().top);
        var height = $('#container').height();
        if (itemOffset > 0 && itemOffset < height) {
             alert($(this).attr('id'));
        }
    });
});

ここでフィドル

于 2012-11-30T15:24:07.153 に答える
1

scrollposition が要素の top-position (y-position) よりも大きいかどうかを確認してください。

$(window).scroll(function(){
  if ($(window).scrollTop() > $('#element').position().top) {
    console.log('#element hits top!');
  }
});
于 2016-01-28T10:42:09.373 に答える