jQuery的時候很難滾動

Question

我更新使用jQuery「滾動」一個div位置onscroll跳過值事件

當我慢慢地滾動它工作正常，但是當我快速地滾動它跳過一些$(window).scrollTop()值，所以在最後的格結果未對齊

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

我該怎麼辦？

Answer 1

解決這不只是設置它，當你在一定範圍內的像素會滾動，而且在邊界設置它，像這樣的方式：

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

發生的原因問題瀏覽器正試圖節省處理能力。畢竟，如果你要在一幀中移動10個像素，爲什麼要渲染10次？只需渲染一幀即可完成。所以它會說「嘿，我已經移動到像素10」，而不是「我已經移動到1」，「我已經移動到2」，「我已經移動到3，等等」。

這樣做的效果是，它可以從一幀中的50到70，並讓你實際上停留在50.因爲你只是扔掉70個像素的70個信息。有了這個代碼，你可以將70像素信息當作基本上的60像素信息。