Как добавлять/удалять класс на чистом js при скролле?

Question

[Denis]

Задача простая,- на сайте есть меню (вверху странице, "зафиксено"). Как при скролле, например на 100px, добавить ему (меню) новый класс и соотвественно, как убрать этот класс когда меню станет на первоначальное положение (менее 100рх от верха страницы)? Немного потерялся в синтаксисе js....

var element = document.getElementById('portfolio-content-nav') + window.pageYOffset + 'px';
    window.addEventListener('scroll', function () {
        if (element > 100) {
            element.classList.add("shadow");
        } else {
            element.classList.remove("shadow");
        }
    });

Answer 1

[Александр]

- var element = document.getElementById('portfolio-content-nav') + window.pageYOffset + 'px';
+ var element = document.getElementById('portfolio-content-nav');
window.addEventListener('scroll', function () {
-   if (element > 100) {
+   if (window.scrollY > 100) {
        element.classList.add("shadow");
    } else {
        element.classList.remove("shadow");
    }
});

Comments

[Антон Литвиненко]

а как вы так сделали красьненьким и зелененьким?

[Александр]

Антон Литвиненко, <code lang="diff"></code>

[Denis]

Спасибо большое, Александр!