Как изменить цвет фона заголовка на свитке, используя vanilla Javascript

Question

В настоящее время я пытаюсь изменить цвет фона моего заголовка, когда пользователь прокручивает его, но, похоже, он не работает. Я прикрепил атрибут onscroll к тегу body и создал соответствующую функцию в Javascript, но безрезультатно. Вот JSFiddle: https://js fiddle.net/Le7jctz8/

Answer 1

Решение

Одной из возможностей является добавление прослушивателя событий в тело документа, прослушивание событий прокрутки и проверка позиции Y документа по мере прокрутки пользователем.

Код

var header = document.getElementById('header');
var oldColor = header.style.backgroundColor;

document.body.addEventListener('scroll', () => {
    let yPosition = document.body.scrollTop;
    if (yPosition > 100) {
        header.style.backgroundColor = "teal";
    }
    else {
        header.style.backgroundColor = oldColor;
    }
})

Вот JSFiddle для наглядности.

https://jsfiddle.net/5hpr7kos/37/

Надеюсь, это поможет.