В данном коде возможно несколько проблем:
- Функция parallaxEffect() передается в качестве колбэка для IntersectionObserver, но это не корректное использование. В качестве колбэка должна быть передана функция, которая будет вызываться, когда элемент пересекает заданную границу.
- В функции parallaxEffect() вы добавляете обработчик событий на прокрутку окна window, каждый раз, когда элемент появляется на экране, что приведет к добавлению множества обработчиков событий и может снизить производительность.
- В функции parallaxEffect() вы используете $, что предполагает наличие jQuery, но в коде не видно, что она была подключена.
Вот как может выглядеть исправленный код:
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
};
const observer = new IntersectionObserver(handleIntersection, options);
function handleIntersection(entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
window.addEventListener("scroll", parallax);
} else {
window.removeEventListener("scroll", parallax);
}
});
}
function parallax() {
let scrolled = window.pageYOffset;
document.querySelector("#thirdimg").style.top = scrolled * 0.2 + "px";
}
const theImage = document.querySelector("#thirdimg");
observer.observe(theImage);
Здесь мы передаем функцию handleIntersection() в качестве колбэка для IntersectionObserver, которая обрабатывает событие пересечения. Затем в функции parallaxEffect() мы добавляем или удаляем обработчик прокрутки в зависимости от того, пересек ли элемент границу. Мы также использовали нативный document.querySelector() вместо $, чтобы избежать использования jQuery.
Кроме того, мы заменили $window.scrollTop() на window.pageYOffset, чтобы избежать зависимости от jQuery.