jquery OnScroll Werte überspringt, wenn harte Scroll

Question

Ich bin ein div Position mit jQuery ‚blättern‘ event Aktualisierung

Es funktioniert gut, wenn ich langsam bewegen, aber wenn ich schnell bewegen springt es einige $(window).scrollTop() Werte, so dass am Ende der div Ergebnisse fehlausgerichtet

$(window).on('scroll', function(){ 
    var scroll = $(window).scrollTop(); 
    if(scroll > 0 && scroll < 60){ 
     $('#div').css('top', 80 - scroll+'px'); 
    } 
    console.log(scroll); 
}); 

Wie kann ich tun?

Answer 1

Ein Weg, dies zu lösen, ist es nicht nur einstellen, wenn Sie in einem bestimmten Bereich von Pixeln sind Scrollen, sondern auch an den Grenzen zu setzen, wie folgt aus:

$(window).on('scroll', function(){ 
    var scroll = $(window).scrollTop(); 
    if(scroll > 0 && scroll < 60){ 
     $('#div').css('top', 80 - scroll+'px'); 
    } else if (scroll <= 0) { 
     $('#div').css('top', '80px'); 
    } else { 
     $('#div').css('top', '20px'); 
    } 
    console.log(scroll); 
}); 

Das Problem tritt auf, weil Der Browser versucht, Rechenleistung zu sparen. Wenn Sie 10 Pixel in einem Frame verschieben, warum sollten Sie dann 10 Mal rendern? Rendern Sie einfach einen Rahmen und fertig sein.

Also wird es sagen "Hey, ich bin zu Pixel 10 bewegt", anstatt "Ich bin auf 1 gezogen", "Ich bin auf 2 gezogen", "Ich bin auf 3 gezogen, etc".

Dies hat den Effekt, dass es von 50 bis 70 in einem Rahmen gehen kann und Sie effektiv bei 50 stecken bleiben. Weil Sie nur die 70 Nachricht für 70 Pixel weggeworfen haben. Mit diesem Code behandeln Sie die 70-Pixel-Nachricht grundsätzlich als eine 60-Pixel-Nachricht.