Animated Sticky Header on Scroll with CSS and jQuery

Ultra lightweight jQuery plugin to create animated sticky header on scroll. It is useful for slim projects to add fixed navigation on the top of page after scrolling.

Plugin Overview

Plugin: Animated Sticky Header
Author: Juan Gallardo
Licence: MIT Licence
Published: January 17, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 6.10 KB

How to Make Animated Sticky Header on Scroll

1. Load the Animated Sticky Header‘s CSS and Js just after the jQuery JavaScript library into HTML document to create fixed header on scroll.

<!-- jQuery -->
<script src=""></script>

<!-- Animated Sticky Header CSS & JS -->
<link rel="stylesheet" href="css/style.css">
<script  src="js/index.js"></script>

2. Finally, Create markup for header menu as follows and add your links into it.

    <div class="header-banner">
        <h1>Visit Finland</h1>
    <div class="clear"></div>
        <div class="site-title">Finland</div>
            <li><a href="/archive">Archive</a></li>
            <li><a href="/events">Events</a></li>
            <li><a href="/contact">Contact</a></li>
<section class="content">
    Your page contents goes here...

3. If you want to add JavaScript inline, copy the following code and paste it between <script> tag.

    if ($(window).scrollTop() >= 300) {
        $('nav div').addClass('visible-title');
    else {
        $('nav div').removeClass('visible-title');
scrollTop() >= 300
Should be equal the the height of the header

4. CSS styles to customize the header and nav elements.

header h1 {
    background-color: rgba(18,72,120, 0.8);
    color: #fff;
    padding: 0 1rem;
    position: absolute;
    top: 2rem; 
    left: 2rem;

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 

nav {
    width: 100%;
    height: 60px;
    background: #292f36;
    postion: fixed;
    z-index: 10;

nav div {
    color: white;
    font-size: 2rem;
    line-height: 60px;
    position: absolute;
    top: 0;
    left: 2%;
    visibility: hidden;
.visible-title {
    visibility: visible;

nav ul { 
    list-style-type: none;
    margin: 0 2% auto 0;
    padding-left: 0;
    text-align: right;
    max-width: 100%;
nav ul li { 
    display: inline-block; 
    line-height: 60px;
    margin-left: 10px;
nav ul li a {
    text-decoration: none; 
    color: #a9abae;

This awesome jQuery plugin is developed by Juan Gallardo. Visit the official website or demo page for more advance usage.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link