Fixed Navigation Bar Minimizing On Scroll Down

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.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments