检查元素是否滚动到顶部

Question

我想检查一个元素是否以大约 100 像素的偏移量滚动到顶部。

我有一个包含 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>

现在我想检查一下，当这些类之一通过滚动到达顶部时

这是我最后一次尝试：

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

我认为这是我目前最接近的尝试......当然，这段代码在 document.ready 中，并且在我的代码末尾......

TLDR：如何检查元素是否滚动到顶部（以及一些偏移量）？

Answer 1

您必须监听滚动事件，然后根据当前滚动距离检查每个元素，例如：

$(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' );
        }
    });
});