JQuery OnScroll пропускает значения, когда трудно прокрутки

Question

Я обновляю позицию DIV с помощью «свитка» JQuery событие

Он отлично работает, когда я прокручиваю медленно, но когда я прокручиваю быстро он пропускает некоторые $(window).scrollTop() значения, так что в конце концов div результаты несогласованные

$(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-пиксельное сообщение.