проверить, прошел ли элемент с прокруткой вверх

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> 

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

Это одна из моего последнего Trys:

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

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

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