How to Hide a Horizontal Navigation Menu Bar on Scroll Down and Show on Scroll UP with CSS and JavaScript
Navigation
How To, for Web Applications
By: Chrysanthus Date Published: 14 Mar 2025
A horizontal navigation menu bar can be hidden as the webpage begins to be scrolled down and be shown as the webpage begins to be scrolled up. This tutorial explains How to Hide a Horizontal Navigation Menu Bar on Scroll Down, and Show on Scroll UP, with CSS and JavaScript.
At the end of this tutorial is the complete webpage code. The reader should copy the complete webpage code into a text editor. Save the file with any name with the extension, .html . Open the file in the browser. Scroll down and then scroll up to appreciate the effect. The reader is advised to do this before continuing to read this tutorial.
The Principal CSS Rule
Let the horizontal navigation menu bar be fixed, at the top of its containing element. For the example of this tutorial, the navigation menu bar is an HTML div element, and the containing element is the HTML body element. The CSS rule for the div bar is:
#navbar {
width: 100%;
background-color: #333;
position: fixed;
top: 0;
transition: top 0.3s;
}
where "navbar" is the ID of the HTML div element that contains the hyperlinks. The CSS properties here that deal with hiding and showing are "position: fixed;", "top: 0;" and "transition: top 0.3s;" . The navigation menu bar should not just disappear above the screen abruptly, or show up abruptly. So the last property, "transition: top 0.3s;" is used to make the menu bar disappear in 0.3s and appear in 0.3s.
JavaScript
JavaScript is used to determine when, during the scrolling down, does the horizontal menu bar hide and when during the scrolling up, does the bar show up. The script is:
<script type="text/javascript">
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
</script>
JavaScript (BOM) has a window object, which is the whole web page. This object has the properties pageYOffset and event onscroll. Remember that the horizontal lines of the webpage are counted positively going downwards, and negatively going upwards.
Each time there is the scrolling movement down or up, the "window.onscroll()" function is called. The navigation menu bar is hidden, depending on the position of the scroll bar. The position of the scroll bar is obtained by the window property, pageYOffset.
In order to hide the navigation menu bar, take it above the top of the body element, by a distance that is greater than the height of the bar. "-50px" has been chosen for that, in the JavaScript.
At this point, the reader should read through the JavaScript (again).
The Complete Webpage Code
It is assume that the reader understands the meaning and use of the rest of the HTML tags and coding, that are given in the complete code below, but have not been explained above.
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Hide a Horizontal Navigation Menu Bar on Scroll Down</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
width: 100%;
background-color: #333;
position: fixed;
top: 0;
transition: top 0.3s;
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
<script type="text/javascript">
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
</script>
</head>
<body>
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
<p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
<p>Scroll down this frame to see the effect!</p>
<p>Scroll up to show the navbar.</p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
The reader should copy the complete webpage code into a text editor.
Save the file with any name with the extension, .html . Open the file
in the browser. Scroll down and then scroll up to appreciate the
effect.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK NEXT