Hide horizonal menu on scroll

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. :upside_down_face:

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:

3 Likes

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

2 Likes