Sprawdź, czy element został przewinięty do góry

Question

Chcę sprawdzić, czy element jest przewijany do góry z przesunięciem ~ 100px.

Mam stronę z 5 podkontynentami i 2 klasami do tworzenia tła. Wygląda to tak:

<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> 

Teraz chcę sprawdzić, kiedy jedna z tych klas osiągnie szczyt przewijając

Jest to jeden z moich ostatnich co¶:

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

myślę, że to to moja najbliższa próba już ... oczywiście ten kod jest w dokumencie. Już i na końcu mojego kodu ....

TLDR: Jak sprawdzić, czy element został przewinięty do góry (i trochę przesunięty) ?

Answer 1

Trzeba nasłuchiwać zdarzenia przewijania, a następnie sprawdzić każdy element przed aktualnie przewijane oddali, coś jak:

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