JQuery scrollTop() точность при быстрой прокрутке страницы (во избежание потери пикселей)

Question

Я использую значение JQuery scrollTop(), чтобы изменить элемент непрозрачности на странице свитка

$(document).on('scroll', function(){ 
    if($(document).scrollTop() >= 1){ 
     $('#elem').css({'opacity': ($(document).scrollTop() * 0.02)}); 
    } 
}); 

он работает нормально, но проблема в том, что если Я быстро прокручиваю страницу, «пропускает» много пикселей, что приводит к уродливому эффекту, потому что возвращенные пиксели, например,

0 
30 
50 
80 
90 
... 

и не

0 
1 
2 
3 
4 

как, когда я медленно прокручивать ...

Кроме того, еще раз, когда я была такая же проблема, где мне нужно гладкие значения, но это поведение «пиксель перескакивание» осложнена вещи ...

Как я могу это решить?

Answer 1

Если вы хотите, чтобы все было плавным, вы должны добавить переход CSS к элементу. Так что даже если прокрутка скачком от 0 до 500, переход останется плавным.

#elem { 
    -webkit-transition: opacity 0.5s ease; 
    -moz-transition: opacity 0.5s ease; 
    transition: opacity 0.5s ease; 
} 

Попытка добиться плавных значений пикселей в jQuery сама по себе не сработает.