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: May 16, 2019
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="https://code.jquery.com/jquery-3.4.1.min.js"></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.

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

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

$(window).scroll(function(){
    if ($(window).scrollTop() >= 300) {
        $('nav').addClass('fixed-header');
        $('nav div').addClass('visible-title');
    }
    else {
        $('nav').removeClass('fixed-header');
        $('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.