Animated Sticky Header on Scroll with CSS and jQuery

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

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

Demo Download

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');
    }
});

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.