Animated Sticky Header On Scroll with CSS3 and Javascript

Another example of Animated Sticky Header on Scroll With CSS3 and Javascript: Today we are going to create a nice looking header with the sticky navigation bar.

A big header with some nice background by default show with underneath the navigation menu bar. The header has some text or logo.

It works when a user scrolls down the page. It will hide the top header part when the user scrolls down the page. The navbar moves to the top of the window browser with clean animation and makes it sticky.

It provides a nice and awesome looking effect on the scroll. This header is perfect if you want to show some useful information to site users as they land on the page.

This information box will hide when the user scrolls down and make the navigation bar sticky at the top of the page to provide a great user experience.

Animated Sticky Header On Scroll With CSS3 and Javascript

Let’s add the main Jquery and a CSS file to get started implementing.

<link rel="stylesheet" type="text/css" href="animated.css" />
<script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

The HTML is pretty much simple. All you have to define the header element. To define the sticky menu bar, simply define it by using the nav element.

<header>
    <h1>Animated Sticky Header</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Gallery</a>
      <a href="#">Contact</a>
    </nav>
</header>

To make the sticky function work. You need to add the following javascript code which is simple and easy to understand.

<script type="text/javascript">
$( document ).ready(function() {
  $(window).scroll(function(){
	var winTop = $(window).scrollTop();
	if(winTop >= 30){
	  $("body").addClass("sticky-header");
	}else{
	  $("body").removeClass("sticky-header");
	}//if-else
  });//win func.
});//ready func.
</script>

That’s it.