überprüfen, ob Element nach oben gescrollt wurde

Question

Ich möchte überprüfen, ob ein Element nach oben mit einem Offset von ~ 100px gescrollt ist.

Ich habe eine Seite mit 5 Subcontents und 2 Klassen um Hintergründe zu erstellen. Es sieht wie folgt aus:

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

Jetzt möchte ich überprüfen, wenn eine dieser Klassen die Spitze erreicht durch

Scrollen Dies ist einer meiner letzten trys:

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

Ich denke, das ist mein nächster Versuch jetzt ... natürlich ist dieser Code in document.ready und am Ende meines Codes ....

TLDR: Wie man überprüft, ob ein Element nach oben gescrollt wurde (und etwas Offset) ?

Answer 1

Sie haben für das Scroll-Ereignis zu hören, dann jedes Element prüfen gegen die aktuell gescrollt Abstand, so etwas wie:

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