Is there a way to hide a header on scroll down? and reveal it on scroll up?

General topics
1

Thats it. I want to create a header that when I scroll down it hides and when I scroll up it appears.
Here a reference of a site like this MakeMake × Elastic - Portfolio
thank you

1 Like
2

I would approach this like this:

look for a script snippet to detect the scrolling direction.
then create a css class with the css property: “transition: top 2s ease” and assign it to your header you want to appear/disappear. Then add another css class with the property: “top: 5%”.
Take you scrolldirection snippet and if the scrolldirection is negative add the second class with the “top:5%” to your header and if direction is positiv remove the class.