Animated Shrink Navbar On Scroll Using HTML CSS & jQuery

Learn how to create a shrink navbar on scroll using HTML, CSS, and jQuery

Animated Shrink Navbar On Scroll Using HTML CSS & jQuery

This Animated Shrink Navbar is built using HTML, CSS, and jQuery to create a sticky navigation bar that changes its size when users scroll through the page. The design improves website navigation while adding a modern scroll animation effect that enhances the overall user experience.

The project uses jQuery scroll events and custom CSS transitions to create a smooth shrinking animation for the navigation bar. As users scroll down the page, the navbar becomes smaller while remaining fixed at the top, providing a professional and responsive layout across desktops, tablets, and mobile devices

Steps to Create a Shrink Navbar On Scroll

Follow these simple steps to build a sticky animated navigation bar:

Create a project folder, for example, shrink-navbar-on-scroll.
Inside the folder, create three files: index.html, style.css, and script.js.
Design the navigation bar structure using HTML.

                            
                                <!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 and animations. Add navigation links and organize the menu structure.

                            
                                <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 scroll events. Create the shrink effect by changing the navbar size on scroll. Make the navigation bar fully responsive for all screen sizes. Save the files and open the project in a browser to test the final navbar animation.

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

Download Code Files