web-dev-qa-db-ja.com

要素が上にスクロールされたかどうかを確認します

要素が最大100pxのオフセットで上にスクロールされているかどうかを確認したいと思います。

背景を作成するために、5つのサブコンテンツと2つのクラスを含むページを取得しました。次のようになります。

<div class="background1">
Content1
</div>
<div class="background2">
Content2
</div>
<div class="background1">
Content3
</div>
<div class="background2">
Content4
</div>
<div class="background1">
Content5
</div>

確認したいのは、これらのクラスの1つがスクロールして一番上に到達したときです。

これは私の最後の試みの1つです。

$('.background1', '.background2').position(function(){
             if($(this).position().top == 100){
            alert('checkThis');
        }
        });

これは私の今最も近い試みだと思います...もちろん、このコードはdocument.readyにあり、私のコードの最後にあります...

TLDR：要素が上（および一部のオフセット）までスクロールされたかどうかを確認する方法

jqueryhtmlscrollscrollto
14
Top Questions

スクロールイベントをリッスンしてから、次のように、現在のスクロール距離に対して各要素を確認する必要があります。

$(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();

    $('.background1, .background2').each(function() {
        var topDistance = $(this).offset().top;

        if ( (topDistance+100) < scrollTop ) {
            alert( $(this).text() + ' was scrolled to the top' );
        }
    });
});
25
adeneo