Как добавлять класс при скролле?

Question

[slavkapiyavka]

Всем привет!
Есть пример:

https://codepen.io/slavka_piyavka/pen/xxbdxGO

Подскажите, как при прокрутке вверх задать списку класс fixed, а при прокрутке вниз убрать его же при помощи js?
Это очень частый случай, но второй день поисков по форумам и гуглу ничего не дал, повсеместно используется jquery, но он категорически запрещён в моём случае. Повторюсь, нужно решение без jquery, только vanilla js, это важно.
p.s. если это вообще возможно.

https://codyhouse.co/demo/auto-hiding-navigation/i...

- вот как это должно в идеале выглядеть.

Думаю нужно использовать слушатель события, а вот куда дальше двигаться - не знаю.

window.addEventListener('scroll', function() {

});

Answer 1

[Пашенька]

Нужно слушать событие scroll и относительно предыдущей позиции определять направление:

window.addEventListener('scroll', function(e) {
  if (this.oldScroll > this.scrollY) {
    console.log('up');
  } else {
    console.log('down');
  }
  this.oldScroll = this.scrollY;
}, false);

Comments

[slavkapiyavka]

большое спасибо за подсказку!

[slavkapiyavka]

а как быть с мобильными устройствами? ведь там wheel не сработает

[Пашенька]

honeydrums, справедливое замечание. Тогда всё же нужно слушать событие scroll вместо колеса и относительно предыдущей позиции определять направление:

window.addEventListener('scroll', function(e) {
  if (this.oldScroll > this.scrollY) {
    console.log('up');
  } else {
    console.log('down');
  }
  this.oldScroll = this.scrollY;
}, false);