Почему возникает ошибка в коде?

Question

[Роман]

window.addEventListener("scroll", function () {
const screenWidth = window.innerWidth;
const header = document.querySelector(".header");
const hero = document.querySelector(".hero");
const aheader = document.querySelector(".fixed-header");

if (screenWidth > 768) {
if (window.scrollY > 0) {
header.classList.add("fixed-header");
hero.classList.add("hero-top");
} else {
header.classList.remove("fixed-header");
hero.classList.remove("hero-top");
}

if (window.scrollY > 100) {
aheader.classList.add("active-header");
} else {
aheader.classList.remove("active-header");
}
}
});
При скроле станицы в консоле появляется ошибка в этой строке - aheader.classList.remove("active-header"); GPT в этом коде ошибки не видит, наверное потому что сам его писал). Хотя эта ошибка на работоспособность кода не влияет, все работает, меню при скроле появляться сверху экрана.

Comments

[Aetae]

Во-первых: оберните код в <code></code>.
Во-вторых: какая ошибка то?

Answer 1

[Rsa97]

Когда вы скроллите в самый верх, у вас позиция равна нулю и отрабатывает строка header.classList.remove("fixed-header");
Когда вы в следующий раз попадаете в обработчик, в строке

const aheader = document.querySelector(".fixed-header");

получаете null.
Решение:

- if (window.scrollY > 100) {
-   aheader.classList.add("active-header");
- } else {
-   aheader.classList.remove("active-header");
- }
+ aheader?.classList.toggle('active-header', window.scrollY > 100);

Answer 2

[AUser0]

Сделайте переменную-флаг, в которую заносите 0, если класс уже удалён. Если флаг уже 0 - повторно отсутствующий класс удалять не нужно.

О - Очевидность!