How to hide header on scroll down & show on scroll up - vanilla Javascript

This video shows how to create a header that hides on scrolling down and shows back again when the user scrolls up. Uses only vanilla javascript, and sample bootstrap template.

Donations: you can support this channel by buying me a coffee:

[alibaghban]

This tutorial deserves ten likes. Thanks a lot.

[majgajsek]

Thank you very much. The comments written in the code make it easier to revisit the code.

[imacoder]

Exactly what I was looking for with some minor change in logic. I wanted to show the menu only when scrolled down to next section.
Thank you so much 👍👍👍👍

[absbi]

Just what I'm looking for. Thanks man 👍

[vlakas]

How can show/hide header be triggered after a certain number of pixels? Right now when you scroll up it instantly shows the header while adding a number of pixels for that to occur would be better.

[chiragredij]

This will work for Navbar also right ?

[hectorcampbell]

error : " Uncaught TypeError: header is null "