Fixed Navigation Bar Minimizing On Scroll Down

Abhigyan Singh 12th Jul 2020

This tutorial will explain about to create fixed navigation bar minimizing on scroll down. When user scroll down then navigation bar will become fixed and the navigation bar will minimize in its size. This happened with just use of HTML and jQuery.

What we will do in this tutorial?

You have probably see some website that using fixed navigation bar. Some of them making the navbar minimized after the visitor scrolls down page. Why is it a good thing? It's easy: the visitor can continuously see the navbar and also doesn't bother
him with it's size. How is this work and how to make it in the proper way?

Step 1: Create a simple navigation bar

Let's create a simple, site wide navigation bar with a list. This is will be an UL with 5 LI elements. Then we write some css rule for it: make it fixed, 100% wide and every list items has 20% width with center aligned text. Then give them some style:40 px height and white background color with black text color. On hover/focus make the background of the link gray.

So we have this:

<html>
<head>
<title>Navbar example</title>
<style>
ul.navbar {
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
border: 1px solid #000;
border-width: 0px 0px 1px 0px;
}
ul.navbar li {
display: inline-block;
float: left;
width: 20%;
text-align: center;
}
ul.navbar li a {
display: block;
width: 100%;
background-color: #fff;
line-height: 60px;
color: #000;
text-decoration: none;
}
ul.navbar li a:hover, ul.navbar li a:focus {
background-color: #ddd;
}
</style>
</head>
<body>
<ul class="navbar">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</body>
</html>

Step 2: Let's use some JavaScript

So now we have to write a script to calculate the distance scrolled from the top of the page and when this value is greater than the height of our fixed navbar, we have to minimize the bar. We are gonna use jQuery. When the visitor is scrolled down the page, we give the navbar a class named minimized:

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
var fromTop = $(document).scrollTop();
if ( fromTop > $('.navbar').height() ) $('.navbar').addClass('minimized');
else $('.navbar').removeClass('minimized');
});
});
</script>

We have to write some content to have some height, so we pasted some lorem ipsum into paragraphs and give them some style rules.

Step 3: Create css rules for minimized class

So now, when the visitor scrolled down the page, the navbar has a minimized class. We need to declare a new rule to our navbar class when it has a minimized class and also use some transition too:

ul.navbar.minimized {
height: 30px;
}
ul.navbar.minimized li a {
line-height: 30px;
}

The result

We created a basic navigation bar which is fixed to the top of the page. When the visitor scrolls down the page and the distance from the top of the document is greater than the height of our navigation bar, we are minimizing it with javascript.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk