15

要素が ~ 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つです：

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

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

TLDR: 要素が一番上 (およびオフセット) にスクロールされたかどうかを確認する方法は?

4

1 に答える 1

28

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

$(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' );
        }
    });
});
于 2013-09-23T14:01:24.913 に答える