How to Shrink Header on Scroll Using HTML, CSS, jQuery
How to Shrink Header on Scroll Using HTML, CSS, jQuery
This Animated Shrink Navbar on Scroll is built using HTML, CSS, and jQuery to create a responsive sticky navigation bar that automatically reduces its height when users scroll down the page. The smooth shrinking animation creates a clean and professional look while keeping important navigation links visible at all times, making it perfect for business websites, portfolios, blogs, and landing pages.
This project uses HTML to create the navigation structure, CSS to design the layout, sticky positioning, transitions, and responsive styling, while jQuery detects page scrolling and dynamically applies the shrink effect. The lightweight code is easy to understand for beginners learning front-end development, and developers can customize the navbar by changing colors, animations, spacing, logos, or navigation links to match any website design.
Animated Shrink Header Nav on Scroll:
An Animated Shrink Navbar on Scroll is a navigation component that automatically changes its size when users scroll through a webpage. Unlike a standard sticky navigation bar, this design reduces the navbar height, logo size, and spacing during scrolling, allowing more screen space for content while keeping the navigation menu accessible. In this project, HTML is used to build semantic navigation elements such as <nav>, <ul>, <li>, <a>, and <div>, CSS creates the modern layout with smooth transition effects, and jQuery listens for scroll events to trigger the shrinking animation by adding or removing CSS classes.
The shrinking effect provides a more polished browsing experience by making the navigation bar compact without affecting usability. CSS transitions ensure the animation remains smooth, while responsive styling keeps the navbar functional across desktops, laptops, tablets, and smartphones. Since the animation is triggered only during scrolling, the project remains lightweight and performs efficiently on modern browsers.
This project is an excellent choice for beginners who want to learn scroll-based animations using jQuery and CSS. It is equally useful for students, freelancers, UI designers, and professional developers looking for a reusable sticky navigation bar with modern scroll effects for corporate websites, portfolios, SaaS applications, blogs, or business landing pages. The clean code structure also makes it easy to customize the logo, colors, menu items, animation speed, and overall appearance.
Steps to Create an Animated Shrink Navbar on Scroll
Follow these simple steps to build a responsive shrink navbar using HTML, CSS, and jQuery:
- Create a project folder and name it shrink-navbar-on-scroll.
- Inside the project folder, create three files named index.html, style.css, and script.js.
- Design the navigation bar structure using semantic HTML elements such as
<nav>,<ul>,<li>,<a>, and<div>. - Add navigation links and organize the menu layout for easy website navigation.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated Header on Scroll with jQuery Demo</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Faq</a></li>
</ul>
</nav>
</div>
<img src="img1.jpg" width="100%" height="600px" style="margin-top: 80px;">
<section class="content">
<p>Deserunt exercitation veniam id velit dolor ullamco ullamco reprehenderit velit exercitation proident minim elit excepteur eiusmod eiusmod.</p>
<p>Irure laborum dolor culpa sit dolor velit excepteur ut exercitation laboris amet ex deserunt ut amet sed ut consequat velit nulla velit magna sint occaecat qui nulla irure culpa non id est veniam commodo sint ea in irure velit exercitation adipisicing dolor in cupidatat enim aliqua anim laboris in esse consectetur pariatur amet adipisicing in et pariatur ea amet ad ullamco enim cillum tempor ea adipisicing dolor exercitation fugiat commodo amet anim id et sed velit proident ut ut irure ut fugiat cillum proident nulla ex officia in ad non tempor reprehenderit voluptate dolor ut reprehenderit duis qui laborum aliqua duis excepteur eu eiusmod exercitation et quis irure ad est cupidatat cillum laboris in exercitation esse amet dolor occaecat dolore veniam aliqua ut magna mollit ea anim ullamco elit sit non ut in irure do ut qui veniam consequat eu in do aliquip dolore velit cupidatat ea sint dolore tempor magna culpa non commodo nisi commodo qui dolor commodo fugiat qui pariatur minim eiusmod pariatur minim in ex velit quis eu et deserunt eiusmod in velit amet irure sed in exercitation laboris id ea sint excepteur id excepteur adipisicing ea voluptate culpa eiusmod elit sunt dolore exercitation ut deserunt sunt.</p>
<p>In eiusmod nostrud mollit dolore in exercitation proident nostrud dolore labore duis et pariatur aliqua quis officia nisi quis elit eiusmod eu eiusmod proident et sit incididunt quis consectetur amet amet culpa esse.</p>
</section>
</body>
</html>
Apply custom CSS styling to create the navbar layout, sticky positioning, transitions, and responsive design.
<style>
/*Syling */
body{
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #85aded;
height: 90px;
overflow: hidden;
transition: height 0.3s;
text-align: center;
line-height: 4px;
}
.header nav{
font-size: 30px;
font-weight: normal;
transition: all 0.3s;
}
/*Add class for jquery code*/
.header.shrink{
height: 60px;
}
.header.shrink nav{
font-size: 21px;
}
nav ul li{
display: inline-block;
margin: 2px 15px;
padding: 4px;
}
nav ul li a{
text-decoration: none;
color: #fff;
font-size: 23px;
transition: .5s ease;
}
nav ul li a:hover{
color: #000;
}
.content{
margin: 100px 30px 0px 30px;
color: #000;
font-size: 22px;
}
</style>
Use jQuery to detect page scrolling through the scroll() event. Create the shrink animation by dynamically changing the navbar size using CSS classes and smooth transitions. Test the navigation bar on desktops, tablets, and mobile devices to ensure a fully responsive and smooth scrolling experience. Save the project files and open index.html in your browser to view the final animated shrink navbar.
<script type="text/javascript">
$(document).ready(function(){
var shrinkheader = 150;
$(window).scroll(function(){
var scroll = getCurrentScroll();
if (scroll >= shrinkheader) {
$('.header').addClass('shrink');
} else {
$('.header').removeClass('shrink');
}
});
function getCurrentScroll(){
return window.pageYoffset || document.documentElement.scrollTop;
}
});
</script>
