Как правильно отслеживать scroll вниз и в верх, js 6?

Question

[Василий]

Как правильно отследить скролл вниз и вверх? Для липкого меню при скролле вниз хочу добавить класс и скрывать его, а при скролле вверх удалять этот класс и снова получается показывать липкое меню.

Я делаю так

// hide stick menu
let body = document.querySelector('body');

body.addEventListener('scroll', () => { 
    let scrollTop = body.scrollHeight;
    console.log(scrollTop);
});

let headerWrapper = document.querySelector('.header-wrapper');
console.log(headerWrapper);

if(scrollTop >= 100){
    headerWrapper.classList.add('hide');
}else{    
    headerWrapper.classList.remove('hide');
}

но где то ошибаюсь, это не работает

Comments

[alex]

js6? это что, новый фреймворк какой-то?

[dicem]

alex, определенно имелся ввиду ES6

Answer 1

[Дима Паутов]

В вашем коде
let scrollTop = body.scrollHeight;
имеет область видимости внутри обработчика события и за его пределами такой переменной нет.
Делайте так:

body.addEventListener('scroll', () => { 
    let scrollTop = body.scrollHeight;
    console.log(scrollTop);

let headerWrapper = document.querySelector('.header-wrapper');
console.log(headerWrapper);

if(scrollTop >= 100){
    headerWrapper.classList.add('hide');
}else{    
    headerWrapper.classList.remove('hide');
}
});

Comments

[Василий]

Переделал

// hide stick menu

document.addEventListener('scroll', () => { 

let scrollTop = document.scrollHeight;    
console.log(scrollTop);
let headerWrapper = document.querySelector('.header-wrapper');

if(scrollTop >= 100){
    headerWrapper.classList.add('hide');
}else{
    headerWrapper.classList.remove('hide');
}


});

но сейчас не срабатывает добавление и удаление класса.

[Дима Паутов]

Василий, ну а теперь делаем так:
window.scrollY
вместо
document.scrollHeight

[Василий]

Дима Турков, сработало! Спасибо большое!

Answer 2

[Сергей delphinpro]

Запомнить scrollTop
Сравнить текущий с предыдущим

Или mousewheel, если не для мобилок.

Comments

[Василий]

А можно в пример какой нибудь, или на моем примере как бы это сделать?

[Сергей delphinpro]

Василий, ровно то, что я вам предложил сделать:

var scrolltop = pageYOffset; // запомнить

window.addEventListener('scroll', function(){
  if (pageYOffset > scrolltop) { // сравнить
    console.log('Scroll down');
  } else {
    console.log('Scroll Up');
  }
  scrolltop = pageYOffset; // запомнить для последующих срабатываний
});

[Василий]

Сергей delphinpro, спасибо! Постараюсь намотать на ус!