JQuery scrollTop () выполняется несколько раз
У меня есть такой код в моем файле Javascript (jQuery):
jQuery(document).on('scroll', function() {
var scrollTop = jQuery(document).scrollTop();
console.info(scrollTop);
if (scrollTop < 350) {
jQuery('.header__top').removeClass('header-fixed');
jQuery('.logo').css({position: "absolute", height: "auto"});
jQuery('.logo img').css("height", "auto");
}else {
jQuery('.header__top').addClass('header-fixed');
jQuery('.logo').css({position: "static", height: "85px"});
jQuery('.logo img').css("height", "100%");
}
});
И когда я пролистываю 3 раза в браузере, происходит что-то странное. Функция срабатывает несколько раз (бесконечно). Затем, когда я прокручиваю вверх или вниз, все работает нормально. Почему моя функция прокрутки вызывает бесконечное выполнение в определенном месте?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Событие scoll запускается несколько раз - это ожидаемое поведение. Вы должны использовать функции throttle / debounce (https://underscorejs.org/#throttle), чтобы решить эту проблему.
Из MDN:
Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame(), setTimeout() or a CustomEvent, as follows.
Я решаю свою проблему, которая заключалась в использовании display: flex и position: fixed для одного и того же элемента.
Код в одном из этих блоков «что-то делать» может легко иметь какое-то отношение к проблеме.