How to Hide a Navigation Bar When Scrolling Down - HTML, CSS & JavaScript Web Design Tutorial

View the SOURCE CODE:

In today's video I'll be showing you how to create a "disappearing" navigation bar that will hide when the user scrolls down, and re-appear when they scroll back up. This is useful for content-heavy websites and mobile devices.

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #html #javascript

[ylast]

This tutorial is professional and dynamic. As a Computer Science graduate not interested in Front End Development at all but still watching this video to get a job, i gotta say such a simple feature we took for granted all the time can take so much effort!

[technobasic]

Note: There is an issue on mobile where you can go into the negative Y-axis, and the nav disappears when you scroll to the top.

TO FIX THIS

After:

lastScrollY = window.scrollY;

Add:

if (window.scrollY <= 0) {

}

This fixes the issue. Essentially saying if it at position 0 or a negative value remove class .nav-hidden

[Mohacks]

Amazing straight to the point video, thanks you!

[danilobatista]

Amazing! Thank you, worked like a charm, sir.

[LagrangePoint]

This is so cool!, it's exactly what I wanted!. Liked + subscribed!.

[victoritodo]

Thanks so much! This was straight to the point and helpful

[cesarimura]

Thank you for your quick tutorial, wish you the best!

[Jeremiahking]

So freaking cool! Thanks man! Building my portfolio website

[mdrobinhossain]

I love you video. you don't west time. Thanks for teach us fast.

[papiermuecke]

Thank you for this video! But does it have a negative impact of the performance of the website because the event listener triggers so many times? I've heard something about the API-Intersection Observer which is not so performance-heavy but idk if the same problem could be solved with that either.

[houdasidahmed]

thanksss a lot your video helps me a lot you are amaizing

[lu-fhcb]

it'd be great if there were 'scrollDown' and 'scrollUp' events 😅

[Nunny]

Hi, thanks. I found one probel on Safari browser on iPhone, when moving up, nav bar appers, but when page reach upper possition, it hide itself. Any idea?

[scocassovegetus]

Can you please tell youtube to add this to their site, thanks!

[amerhaadiaan]

Hello, can you say your font family icon?

[soJAKEable]

Hey, I'm having a issue when I scroll back up to the top the nav shoots up off the page...

[mr.wazirgaming]

Hey I am about to search
' a whatsapp click button link on Web site'
I have found so many but if you can make video for us then thank you sir 😉👍

[laurenmckittrick]

I copied everything you did and mine didn’t work 😢