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 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 it on scroll down using JavaScript.
A 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 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.
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
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 it on your projects and websites. If you’re looking for 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 [Source Codes]
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 the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hide Navbar on Scroll Down</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<nav>
<label>CodingNepal</label>
<ul>
<li class="active" ><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blogs</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
<div class="content">
<h2 class="header">
Hide Navbar Bar On Scroll
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur iure, error, dolores alias aliquam, voluptatibus blanditiis qui sint laborum veritatis fugiat mollitia assumenda delectus illum maiores accusantium dolorum id, dolor eum aperiam. Porro saepe incidunt earum deleniti, harum dolorem facilis impedit corrupti. Sint, repudiandae qui assumenda dolorem rem, eaque iusto mollitia? Nemo quasi voluptatem eveniet, labore perferendis ratione, sunt hic praesentium illum similique suscipit neque quibusdam. Dolores dolorum neque beatae, itaque harum dolorem fugiat, corporis ea quisquam assumenda? Dolore alias maxime sapiente, accusamus nesciunt vitae maiores ullam labore dolorem, illo quasi ad mollitia beatae debitis itaque. Rerum eos voluptates laudantium?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur iure, error, dolores alias aliquam, voluptatibus blanditiis qui sint laborum veritatis fugiat mollitia assumenda delectus illum maiores accusantium dolorum id, dolor eum aperiam. Porro saepe incidunt earum deleniti, harum dolorem facilis impedit corrupti. Sint, repudiandae qui assumenda dolorem rem, eaque iusto mollitia? Nemo quasi voluptatem eveniet, labore perferendis ratione, sunt hic praesentium illum similique suscipit neque quibusdam. Dolores dolorum neque beatae, itaque harum dolorem fugiat, corporis ea quisquam assumenda? Dolore alias maxime sapiente, accusamus nesciunt vitae maiores ullam labore dolorem, illo quasi ad mollitia beatae debitis itaque. Rerum eos voluptates laudantium?
</p>
<h2 id="about">
About Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, vel ex, accusantium tempora aliquam dolorem! Nesciunt itaque sapiente eius culpa enim ipsam facilis, amet beatae ea velit illo placeat omnis eum error consequatur recusandae esse magnam, rem hic doloremque necessitatibus earum delectus? Dignissimos exercitationem consequatur quae, reprehenderit soluta! Beatae itaque, maxime, illo aut rerum hic veniam nihil perferendis delectus neque excepturi enim iure impedit minus molestias dolor consequatur nisi praesentium tempore quos perspiciatis eius fugit similique sapiente! Nisi, ab, velit.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<h2 id="blog">
Blogs Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, vel ex, accusantium tempora aliquam dolorem! Nesciunt itaque sapiente eius culpa enim ipsam facilis, amet beatae ea velit illo placeat omnis eum error consequatur recusandae esse magnam, rem hic doloremque necessitatibus earum delectus? Dignissimos exercitationem consequatur quae, reprehenderit soluta! Beatae itaque, maxime, illo aut rerum hic veniam nihil perferendis delectus neque excepturi enim iure impedit minus molestias dolor consequatur nisi praesentium tempore quos perspiciatis eius fugit similique sapiente! Nisi, ab, velit.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<h2 id="gallery">
Gallery Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, vel ex, accusantium tempora aliquam dolorem! Nesciunt itaque sapiente eius culpa enim ipsam facilis, amet beatae ea velit illo placeat omnis eum error consequatur recusandae esse magnam, rem hic doloremque necessitatibus earum delectus? Dignissimos exercitationem consequatur quae, reprehenderit soluta! Beatae itaque, maxime, illo aut rerum hic veniam nihil perferendis delectus neque excepturi enim iure impedit minus molestias dolor consequatur nisi praesentium tempore quos perspiciatis eius fugit similique sapiente! Nisi, ab, velit.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<h2 id="services">
Services Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, vel ex, accusantium tempora aliquam dolorem! Nesciunt itaque sapiente eius culpa enim ipsam facilis, amet beatae ea velit illo placeat omnis eum error consequatur recusandae esse magnam, rem hic doloremque necessitatibus earum delectus? Dignissimos exercitationem consequatur quae, reprehenderit soluta! Beatae itaque, maxime, illo aut rerum hic veniam nihil perferendis delectus neque excepturi enim iure impedit minus molestias dolor consequatur nisi praesentium tempore quos perspiciatis eius fugit similique sapiente! Nisi, ab, velit.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<center>
"Subscribe to CodingNepal"
</center>
</div>
<script>
let navbar = document.querySelector('nav');
var scrollPrev = window.pageYOffset;
window.onscroll = function(){
var scrollCur = window.pageYOffset;
if(scrollPrev > scrollCur){
navbar.style.top = "0";
}else{
navbar.style.top = "-90px";
}
scrollPrev = scrollCur;
}
</script>
<script>
$('nav ul li').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Noto+Sans|Open+Sans:500,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat',sans-serif;
scroll-behavior: smooth;
}
body::selection{
color: white;
background: #0089f2;
}
body::-webkit-scrollbar{
width: 16px;
}
body::-webkit-scrollbar-track{
background: #e6e6e6;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb{
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: linear-gradient(#3498db,#9b59b6);
}
body::-webkit-scrollbar-thumb:hover{
background: linear-gradient(#2691d9,#954eb1);
}
nav{
position: fixed;
top: 0;
left: 0;
height: 80px;
width: 100%;
background: white;
box-shadow: 1px 1px 15px silver;
z-index: 1;
transition: top 0.3s;
}
label{
line-height: 80px;
padding: 0 80px;
font-size: 40px;
color: #0089f2;
letter-spacing: -1px;
user-select: none;
}
nav ul{
list-style: none;
position: absolute;
right: 0;
top: 0;
display: flex;
line-height: 80px;
margin-right: 50px;
}
nav ul li{
margin: 0 5px;
}
nav ul li.active a{
color: #0089f2;
box-shadow: inset 0 0 5px #0a87f5,
inset 0 0 10px #85c3fa,
inset 0 0 15px #b6dbfc;
}
nav ul li:hover a{
color: #0089f2;
box-shadow: inset 0 0 5px #0a87f5,
inset 0 0 10px #85c3fa,
inset 0 0 15px #b6dbfc;
}
nav ul li a{
color: grey;
padding: 10px 20px;
border-radius: 5px;
border: 1px solid transparent;
text-decoration: none;
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
}
nav ul li a.active2{
color: #0089f2;
box-shadow: inset 0 0 5px #0a87f5,
inset 0 0 10px #85c3fa,
inset 0 0 15px #b6dbfc;
}
.content{
position: absolute;
top: 100px;
padding: 0 80px;
}
.content h1.header{
font-size: 55px;
}
.content p{
padding: 10px 0;
font-size: 18px;
text-align: justify;
font-family: 'Noto Sans', sans-serif;
}
.content h2{
font-size: 45px;
}
.content ul{
padding: 0 0 10px 30px;
}
.content ul li{
font-size: 20px;
font-family: 'Noto Sans', sans-serif;
}
center{
color: #0089f2;
font-size: 22px;
margin-bottom: 20px;
}
That’s all, now you’ve successfully created a Scroll Down to Hide Navbar with HTML CSS & JavaScript. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
