Hide horizonal menu on scroll

[Gandalf]

I am trying to create a horizontal top menu that disappears as the user scrolls down the page. I have got part-way there - it does disappear, but before it disappears it flashes on and off. I’m jiggered if I can see why.

Here’s my codepen:

When I’ve got that working, I would like the menu to scroll out of view rather than just vanish. I realise that that won’t be done using the display attribute.

[RyanReese]

Hey Gandalf - it’s flickering because as you start scrolling, and you get 50px more down the page, you hide the header, which then removes the header height from the page scroll position so you get the jittering. So you might be scrolling from 0-100px and at 50px, the header hides and you get back below 50px so the header goes through a show/hide spasm.

If we just go ahead and make the header slide out of view, thus never removing its height from the page flow, we remove the jitters:

[Gandalf]

Hey Ryan. Many thanks for both the explanation and the solution.

[Gandalf]

I wanted to get the menu to come back if the user starts scrolling up again. I think to check if the user is scrolling up I check the current Y position with the last but something’s not right either with my thinking or my code (or both!)

I’ve modified my codepen:

[rpg_digital]

A bit rusty Gandalf, but if you just amend @RyanReese 's script to translateY doesn’t that work?

window.onscroll = function() {
document.querySelector("header").style.transform = (window.scrollY > 50)
    ? "translateY(-100%)"
    : "translateY(0%)";
};

[Gandalf]

@rpg_digital

doesn’t that work?

That moves the menu up rather than to the right, @rpg_digital but getting the menu to reappear if the user scrolls up is defeating me.

[rpg_digital]

@Gandalf ah ok, as I say a bit rusty.

[PaulOB]

@Gandalf

I wanted to get the menu to come back if the user starts scrolling up again.

I have an example here that may help.

It uses jquery but you should be able to follow the logic.

Actually I think this one is easier to follow.

[Gandalf]

Thanks, Paul. I shall play. Should keep me out of trouble for a bit…

[Gandalf]

Yay! I managed to fix it with help from your codepens @PaulOB and a good night’s sleep

(I’ve updated the pen in case it helps anyone else.)