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

hey guys how you going my name is dom and today i'm going to be showing you how to create a navigation bar that is going to hide when the user scrolls down and then reappear when scrolling back up so this is very easy to achieve with a little bit of javascript and you can easily add it to your existing website so the main motivation behind something like this might be to simply give your users some more screen real estate so they can read more text right up top here so going inside this tab right here i've got a sample really simple html navigation bar so we're going to be upgrading this to be of course this right here now all of the source code for this this video is going to be linked down below if you want to follow along so going inside the text editor i've got something like this we've got the navigation element with a class of nav and we have the three nav links here with a class of nav underscore underscore link so we're going to begin with the css going up inside the style we're going to be targeting the body first we're going to be declaring a css variable here we can say dash dash nav dash height so basically we're assigning our nav height to 50 pixels and if you haven't seen this css variable before basically it's a reusable variable which we're going to be using multiple times in our code okay so drop down here we can say padding top of var then pass through nav height so basically by setting this right here we're simply saying padding top of 50 pixels now what is this padding for basically because the navigation bar is going to float above everything else on the web page it is going to hide the text content on your page behind it if you don't have this padding top this padding top is going to basically push everything down that way your text is still going to be fully visible when the user is you know using your website okay cool so dropping down here let's now target the nav class okay and for this we're going to be setting a width of 100 and a height of 50px now this right here once again let's make this var and say nav heights for our variable version of that 50px we can also say a position of fixed that way it's going to float above everything else on the web page and a top of zero and our left of zero that way it's going to be in the top left corner and also a background here of zero zero nine five seven eight for my decode green color so if i save this go inside the browser we get something like this so now we're going to be styling up our our links here just really really really quickly to make them centered so for this we're going to be setting a display of flex and align items of center as well as a box shadow here of zero zero 10 px igba 000 0.2 this is completely optional it's up to you guys how you want to style up your navigation bar save this back in the browser and we get something like this so now let's add some styles to the actual text itself so i'll just copy and paste some very basic css for the navigation link class right here that's color text decoration margin and font weight save this back in the browser and we get something like this okay so now let's work on the actual navigation bar scrolling behavior itself so for this we need we need to firstly have some content to scroll down okay so i'll copy and paste my paragraph tags from the previous example inside a div here so of course it's fully optional here you know this would be your actual content okay i'll minimize this div and now of course we can scroll down and actually test the solution okay and we can see here the actual uh the content is going to start 50 pixels from the top given our padding top here if we don't have the padding top we can see it gets hidden so that's why that padding top was there previously anyway going inside the javascript in the body of the html we're going to firstly be grouping together all of our code so by putting a block right here basically we'll just say something like this enable hidden navbar so all that code is going to be contained within this block okay then we're going to say const nav is equal to document.queryselector we're going to select the class of nav so basically this nav here is going to be essentially this nav inside the javascript okay getting it by class right then we're going to say let's last scroll y is equal to window dot scroll y so basically we need to determine if the user is scrolling up or scrolling down this right here helps us achieve that so if i log out the value of window.scroll y let's see what happens back inside the browser if i log out window.scroll or y we get 0. if i scroll down and do it again we get 133. if i scroll down some more do it again 2 3 2 if i scroll up we get 8 7. so basically this number is number of pixels which the user is currently scroll down on the y-axis so we're going to be storing the current scroll y when the page first loads up then we're going to say window dot add event listener listen for the scroll event whenever the user scrolls down the web page this function is going to run it's going to run many times whenever they're scrolling okay then inside here we need to compare the last scroll y value with the current scroll y value and that is going to determine how up or down so we'll say if the last scroll y is less than the current window dot scroll y then we can just say console.log we are going down okay just like that else if that's not the case we're going to be going up so go inside here and we'll say up so obviously if your previous scroll y is less than your current scroll y you're going down okay so if i save this go inside the browser if i then scroll up we get we are scrolling up if i scroll down we get okay that's that's an issue now why is this happening the reason is is because we need to re-declare the last scroll y so once this code has been run and we've checked the last scroll y we need to say last scroll y is equal to the current scroll y that way when the function runs again it's going to use your previously set scroll y giving you up-to-date information back inside here try it again scroll down we get we're going down scroll up we get up so we get down then we get up right there so that's working okay so now how do we make the navigation bar hide for this inside here we're going to say nav dot class list dot add we're going to be adding a class of nav dash dash hidden so we're going to be applying some css for this class very shortly but basically we're going to be adding this class when hiding the navigation bar when we are making it reappear we simply remove the nav hidden class and when this runs it's going to be visible again okay so save this back in the browser let's watch the elements tab right here on the nav scroll down hidden there we go scroll up gone away scroll down hidden up it's gone away so let's go in the css now and we're going to target the nav hidden class so for this one we can simply say transform and we'll say translate y negative 50px so basically we're going to be moving or shifting the navigation bar off the screen so we're going to move it negative 50 pixels in the y direction because 50 is the same height as the variable up here it's gonna hide the entire navigation bar off the screen in the upwards direction but let's make use of that variable to achieve that we can say calc then say negative one times the then nav height so basically negative one times 50 gives us negative 50 and we're simply reusing our variable there we're going to also say a box shadow of none just to remove that box shadow save this back in the browser scroll down and it goes away scroll up and it comes back so let's apply a nice smooth transition now so it fades away nicely to achieve that back inside here we can say transition on the nav class and we'll just say transform at 0.2 seconds that way it takes .2 seconds to change the transform giving us a nice smooth transition and we can see that happening right up there so that is how to create a navigation bar that is going to hide when scrolling down if today's video helped you out drop a like and subscribe and i'll see you guys in the next video

Channel: dcode

Views: 40,877

Keywords: web design tutorial, web development tutorial, html css nav menu, html css nav bar, html css navbar, navigation bar tutorial for websites, website navigation bar designs, html css javascript navigation bar tutorial, hide navigation bar on scroll, hide navigation menu when scrolling, fixed navigation menu, floating navigation menu, floating navigation bar when scrolling down

Id: Q_XZk5Vnujw

Length: 9min 19sec (559 seconds)

Published: Wed Aug 11 2021