controlla se l'elemento è stato spostato verso l'alto

Question

Voglio controllare se un elemento viene fatto scorrere verso l'alto con un offset di ~ 100px.

Ho una pagina con 5 sottocontenuti e 2 classi per creare sfondi. Ecco come si presenta:

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

Ora voglio controllare, quando una di queste classi raggiunge la cima scorrendo

Questo è uno dei miei ultimi Trys:

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

penso che questo è il mio tentativo più vicino ormai ... naturalmente questo codice è in document.ready e alla fine del mio codice ....

TLDR: Come verificare se un elemento è stato fatto scorrere verso l'alto (e qualche offset) ?

Answer 1

Devi ascoltare l'evento scroll, quindi controllare ogni elemento contro la distanza attualmente scorrere, qualcosa di simile: evento

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