Почему не работает classList при скролле?

Question

[dhat]

Хочу переделать сайт, не используя jQuery и сторонние библиотеки для замены классов. Почему тут не срабатывает classList при скролле?

codepen.io/dhatt/pen/NRqGKO

Answer 1

[Александр]

Не верное использование API, ошибки в написании. Можно как-нибудь вот так:

function init() {
  window.addEventListener('scroll', function(e) {
    var header;
    var distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 600,
      header = document.querySelector("header");
    if (distanceY > shrinkOn) {
      header.classList.add("smaller");
    } else {
      if (header.classList.contains("smaller")) {
        header.classList.remove("smaller");
      }
    }
  });
}
window.onload = init();

Comments

[dhat]

К содалению так срабатывает, но только единоразово при скролле вниз (а должно туда-сюда) codepen.io/dhatt/pen/NRqGKO

[dhat]

А нет, точно, вы еще .contains добавили - работает отлично. Спасибо!

[Александр]

dhat: у меня (Safari 10) работает при скролле и вверх и вниз. Ищите решение сами)

Answer 2

[iBird Rose]

вроде же такой синтаксис был?

document.getElementByTagName("header").classList.add("smaller");

Comments

[dhat]

Да, срабатывает, но почему-то только единоразово (при скролле вниз). А должно туда-сюда менятся. При использовании сторонней библиотеки так работал код. Тут надо еще что-то менять?

[dhat]

Спасибо, код рабочий.