Scroll Down to Hide Navbar with HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to Hide Navbar on Scroll Down using HTML CSS & JavaScript. As you have seen on the many websites there is a Navigation Menu Bar and when you scroll down that Navigation Bar or Navbar Hide automatically. These designs or features are still in a trend and used by many websites. Earlier I have shared a Responsive Navbar using HTML & CSS only. Now it's time to create the navbar and hide on scroll down using JavaScript.

navigation bar is a user interface element within a webpage that contains links to redirect other sections of the website. A website navigation bar is most commonly used to display as a horizontal list of links at the top of each page. It may be below the header/navbar or logo, but it is always placed before the main content of the webpage.

Scroll Down to Hide Navbar with HTML CSS & JavaScript

Today in this blog, I'll share with you this program (Scroll Down to Hide Navbar). At first, on the webpage, there is a navbar and some dummy texts. And when you scroll down, the top Navigation Menu Bar will hide and when you scroll up, that hidden navbar will appear. This task is only done with the use of JavaScript.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Scroll Down to Hide Navbar with HTML CSS & JavaScript).

Video Tutorial of Hide Navbar on the Scroll Down using JavaScript



If you are a beginner and you have basic knowledge of HTML CSS & JavaScript then you can also create this type of navbar and use on your projects and websites. If you're looking for a Responsive Codes of this Navbar or Navigation Menu Bar then click here. I have already uploaded many blogs and codes related to this program. 

If you like this program (Scroll Down to Hide Navbar with HTML CSS & JavaScript) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Scroll Down to Hide Navbar using JavaScript [Source Codes]


As always, before sharing the codes of this program (Scroll Down to Hide Navbar). Let's a few talk about the main tags and codes of this program. At first, In the HTML File, I created <nav> tag and placed all other tags inside it. Then I created a <label> for the logo. After that, I created a <ul> tag and placed five <li> tags inside it. Inside each <li> tag I created a <a> anchor tag.

In the CSS File, first using * selector I reset default margins and padding to 0; Then I create a navbar and did basic styling to this navbar, ul, li, and a. After styling these elements, I created a shadow hover effect when viewers hover on a specific item. This hover effect informs as an active tab also. That means this shadow effect informs viewers which tab is active now.

In the JavaScript File, first I created a variable "scrollPrevious' and store the page Y value in it. Then I create a window on scroll event and create a function. Inside this function, I create another variable with the class name "scrollCurrent" and store the current page Y value. Then I put if/else statement inside this function. In if statement, I wrote a condition if scrollPrevious is greater than currentScroll then change the position of Navbar top to 0; otherwise go to else statement and change the position of Navbar top to -90px.

To create this program (Scroll Down to Hide Navbar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.


4 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. How will you make a text box like your website you used to give codes of html and css
    Please tell me on whatsapp 8958446414

    ReplyDelete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post