Проверьте, прокручен ли элемент вверх

Я хочу проверить, прокручивается ли элемент до вершины со смещением ~ 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>

Теперь я хочу проверить, когда один из этих классов достигает вершины, прокручивая

Это одна из моих последних попыток:

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

Я думаю, что это моя самая близкая попытка к настоящему времени... конечно, этот код находится в документе. Уже и в конце моего кода....

TL;DR: как проверить, что элемент получил прокрутку вверх (и некоторое смещение)?

Ответы

Ответ 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' );
        }
    });
});