Hide and Show Navbar On Scroll With JavaScript

In this tutorial we will see how to Hide and Show Navbar On Scroll With JavaScript. JavaScript Window pageYOffset property is used with CSS position property and transition property to hide and show the Navbar on scroll up and down.


Take a look at the HTML code given below, it has a main container of menu with class and id named menu. Three links made with anchor tags are also used in this example.

<div class="menu" id='menu'>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>

CSS Code

CSS code is given below, In this code position: fixed; is used to fix the position of the Navbar. This position will be changed on scroll with the help of JavaScript code.

CSS transition property is also used to make the transition smooth. In this example the code will take 1 second to hide and show the Navbar.

margin: 0;
padding: 0;    
font-family: monospace;
height: 2000px;
background-color: #FCEC5E;    
position: fixed;    
background-color: #444;
text-align: center;
width: 100%;
transition: 1s;    
.menu a
display: inline-block;
color: #eee;
text-decoration: none;
font-size: 20px;
padding: 20px 10px;    
.menu a:hover
background-color: #000;    

JavaScript Code

Take a look at the JavaScript Code given below, Window pageYOffset property is used in this code.

window.pageYOffset returns the number of pixel the document has been scrolled vertically.

This value is in pixels, it is used in this example to decide whether to hide or show the Navbar.

If value of scroll is greater than 50px, the Navbar will be hidden slowly by the JavaScript code. This is done by changing it's top position to 63px, which is height of our Navbar in this example. This value is used to hide the Navbar completely.

On scroll up, as soon as the value of window.pageYOffset reaches 50 or it is less than 50, the Navbar will reappear.

getElementById() method is used to select or target the Navbar, while .style property is used to change it's top position.

window.onscroll = function()
var pos = window.pageYOffset;
if(pos > 50)
document.getElementById('menu').style.top = "-63px";
document.getElementById('menu').style.top = "0";


Video Tutorial

Watch our video tutorial on how to Hide and Show Navbar On Scroll With JavaScript.

Change font-size using JavaScript Get Font Size of any Tag using JavaScript Change Position of HTML Element using JavaScript How to Change Image on Hover with JavaScript How to Disable Button by Class Name in JavaScript How To Change Image Size with JavaScript How to change Image opacity with JavaScript How to Change image src on click with JavaScript How to get the lang attribute value in JavaScript How to Get attribute Value using JavaScript How To Check if Attribute Exists or not with JavaScript How To Count number of links on Page with JavaScript How To Scroll Page to Bottom using JavaScript How To Detect Shift Key Press with JavaScript Change Text Color On Hover with JavaScript Hide and Show div using JavaScript Get Button text with JavaScript Get textarea value with JavaScript Get table row Height with JavaScript Auto Increase width of input field with JavaScript Set Textarea maxLength with JavaScript Set Textarea Value with JavaScript JavaScript Count list items JavaScript set input field value Count Button Clicks with JavaScript Scroll Page to the Top on Click with JavaScript