Shrinking Navbar Resize When Scrolling Down – Jquery Tutorial

Best jquery tutorial to create shrinking navbar resize when scrolling down.

This tutorial will explain how 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.

Step 1:

Create a simple navigation bar

[code]
<!DOCTYPE html>
<html>
<head>
<title>Navbar example</title>
</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>
[/code]

Step 2: JavaScript

Lets 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:

[code]
$(document).ready(function() {

$(window).scroll(function() {
var fromTop = $(document).scrollTop();
if ( fromTop > $(‘.navbar’).height() ) $(‘.navbar’).addClass(‘minimized’);
else $(‘.navbar’).removeClass(‘minimized’);
});

});

[/code]

Step 3:

Create css rules for minimized class.

[code]
body{font-family: ‘Open Sans’, sans-serif;}
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;
transition: height .3s;
background:black;
color:#fff;
}

ul.navbar li {
display: inline-block;
float: left;
width: 20%;
text-align: center;
}

ul.navbar li a {
display: block;
width: 100%;
background-color: #00726e;
line-height: 60px;
color: #fff;
text-decoration: none;
transition: line-height .3s;
}

ul.navbar.minimized {
height: 30px;
}

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

ul.navbar li a:hover, ul.navbar li a:focus {
background-color: #ddd;
}

p {
margin: 60px auto;
}

[/code]

I hope this tutorial of ‘Shrinking Navbar Resize When Scrolling Down’ will help you.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. PHP Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.