Как слушать scroll up и добавлять класс?

Question

[ettge]

Делаю функцию, когда Header скрывается на определенном моменте скролла вниз (в примере 250px), и надо чтобы он показывался обратно при любом движении скролла вверх (а не опять при достижении этой точки 250px).

Как сделать, чтобы при движении юзером скролла вверх, например на 50px, срабатывал триггер и добавлял класс headroom--pinned (или удалял headroom--unpinned)?

https://codepen.io/kodekrendel/pen/XRpXej

Answer 1

[Сергей]

https://codepen.io/anon/pen/jmyqMV?editors=0010#0

Comments

[ettge]

Ой как хорошо. Спасибо огромное!

[ettge]

Не подскажите почему у меня появилась такая ошибка с этим кодом в моем SSR приложении. Возникает когда я рефрешу страницу ReferenceError: window is not defined

[ettge]

Я так понял потому что он на стороне сервера не имеет window. Как адаптировать под SSR?

[ettge]

Сорри, решил:

if (process.BROWSER_BUILD) {
      window.onNuxtReady(() => {
        window.addEventListener('scroll', this.handleScroll)
      })
    }