Запутался в обычном скролле на чистом JS?

Question

[ziss]

Вроде бы обычная штука : хедер при скролле становится фиксированым, проблема в том, что потом, при скроллинге обратно вверх, клас .scrolled не удаляется:(
<header id='header'></header>

.scrolled {
position: fixed;
...
}

window.onscroll = function () {scrollFunc()};
const header = document.getElementById('header');
const scrolled = header.offsetHeight;

function scrollFunc() {
    if (window.pageYOffset  >=  scrolled) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
}

Спасибо за ответы.

Comments

[suberg]

Скопировал твой код в кодпен, мало-мальски стилизовал хедер чтоб его видеть и всё работает.

[suberg]

Только код можно немножко укоротить:

window.onscroll = scrollFunc;
...
function scrollFunc() {
  header.classList.toggle('scrolled', window.pageYOffset >= scrolled);
}

[ziss]

укоротить можно, но так написал, что бы понятно было) Спасибо за ответ, пойду смотреть что не так .