Wie können Sie mit jQuery messen, wie weit der Benutzer gescrollt hat?

Question

Ich muss den Stil eines Elements ändern, nachdem der Benutzer über eine bestimmte Anzahl von Pixeln hinaus gescrollt hat, und ändere es dann zurück, wenn der Benutzer wieder gescrollt hat. Ich benutze jQuery bereits, also würde ich gerne jQuery verwenden, wenn möglich. Kann jemand ein Beispiel angeben, bei dem Sie einem div einen Klassennamen hinzufügen, nachdem der Benutzer mehr als 200 Pixel gescrollt hat und dann den Klassennamen entfernt hat, nachdem der Benutzer wieder auf weniger als 200 Pixel gescrollt ist?

Answer 1

Siehe scrollTop, scrollLeft und Events/Scroll.

Beispiel:

$('div#something').scroll(function() { 
    if ($(this).scrollTop() > 200) { 
     $(this).addClass('foo'); 
    } else { 
     $(this).removeClass('foo'); 
    } 
}); 

Answer 2

Das funktioniert nicht, weil Mobiltelefone nicht akzeptieren .scrollTop(), da sie stattdessen ein Ansichtsfenster verwenden. Somit ist .scrollTop() immer 0 auf Mobiltelefonen. Ich suche immer noch nach der richtigen Lösung, habe aber keine gefunden.