Почему window.onscroll отстает от фактической прокрутки?

Question

Я использую эквивалентный код для размещения элемента:

$(window).scroll(function(){ 
    my_element.css("top",$(window).scrollTop() + 50) 
}); 

Проблема заключается в том: во время прокрутки элемент не остается по-прежнему. Он колеблется взад-вперед, как если бы событие onscroll не вызывалось так быстро, как прокрутка. Любопытно, иногда это просто работает.

Answer 1

Я предлагаю вам использовать position: fixed в CSS вместо настройки верхней части каждого прокрутки. Таким образом, независимо от того, как быстро вы прокрутите страницу, ваш заголовок будет устойчивым на одной позиции.

т.е.

<div style="font-family: oswald; color: white; position: fixed; top: 50px; ...">...</div> 

и лопаточной обработчик события прокрутки в целом.

Или еще лучше использовать класс, <div class="heading">...</div>

И в вашем CSS:

.heading { 
    font-family: oswald; 
    ... 
    position: fixed; 
    top: 50px; 
} 

Answer 2

Это потому, что когда вы DRAG и переместить кнопку прокрутки для прокрутки, событие прокрутки называется несколько раз в зависимости от того, насколько быстро или медленно вы это делаете, и в это время каждый раз вызывается, вычисляется и выполняется функция, указанная вами в событии прокрутки (что может занять несколько секунд).

В качестве работы вы можете использовать позицию CSS: фиксированное свойство. Если вы должны сделать это вместо этого, то возможная работа должна состоять в том, чтобы сделать это с небольшой задержкой, возможно?