Как отображать меню при скролле вверх?

Question

[Дмитрий]

Хочется реализовать меню в хедере как вот здесь. Я сделал, что бы при скролле вниз меню пряталось (эффект в хедере страницы). Вот:

var topNavigation = document.querySelector('#nav-wrapper');

function hideTopNav(e){
	if(document.body.scrollTop > 300){
		topNavigation.style.transform = 'translateY(-90px)';
	} else{
		topNavigation.style.transform = 'translateY(0)';
	}
};

document.addEventListener('scroll', hideTopNav);

Но я не знаю как сделать эффект этого меню на всей остальной странице. Т.е. что бы при скролле вверх меню появлялось, а при скролле вниз оно скрывалось. И что бы это ещё не конфликтовало с эффектом в хедере страницы.

Answer 1

[nuclear_kote]

var prevPosition = 0;
document.addEventListener('scroll', onScroll);

function onScroll() {
   if (document.body.scrollTop > prevPosition) {
     menu.removeClass('menu-open');
   } else {
     menu.addClass('menu-open');
   }
   prevPosition = document.body.scrollTop;
}

как вариант

Comments

[Дмитрий]

Этот эффект, как я понял, будет работать с самого начала страницы? С 0 ведь. А мне нужно, что бы после тега header. Как можно указать это явно?

[nuclear_kote]

Дмитрий: ну можно высчитывать позицию этого header'а и добавить условие в onScroll

[Дмитрий]

nuclear_kote: а из-за чего оно работает с такими рывками? https://gyazo.com/1e85830691868bc20624b1746242b3f3

[dhat]

Дмитрий: вы думаете по этой гифке можно что-то увидеть?

[Дмитрий]

dhat: ну я просто показал. + уже исправил. transition мешал