How To Create Animated Fixed Sticky Header On Scroll with HTML CSS3 and Javascript

In This quick tutorial I am going to show you awesome script developed by Brady Sammons to Create Animated Fixed Sticky Header On Scroll with CSS3 and Javascript. This is a simple lightweight HTML+CSS3+Jquery snippet to create a position fixed header that will changes its size on scroll. The idea is to decrease header’s size and fixed navigation menu as header on scroll.
sticky-fixed-header


How To Create Animated Fixed Sticky Header On Scroll with CSS3 and Javascript

Adding following HTML, CSS, Jquery on page to Create Animated Fixed Sticky Header On Scroll with CSS3 and Javascript

HTML

Position fixed HTML header that will changes its size on scroll.

<body>
<header>
    <h1>Sticky Header Title</h1>
    <nav>
      <a href="">Home</a>
      <a href="">About</a>
      <a href="">Service</a>
      <a href="">Contact</a>
    </nav>
  </header>
</body>

CSS

Add CSS on page to styling Sticky Header.

<style>
@import "compass/css3";
 
@import "compass/css3";
@import "compass/reset";
*{
	@include box-sizing(border-box);
}
 
body{
	background-color: #ecf0f1;
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	padding-top: 330px;
	@include transition(padding-top .5s ease);
        margin: 0;
        padding: 0;
}
header{
	width: 100%;
	height: 300px;
	background-color: #3498db;
	text-align: center;
	position: relative;
	position: fixed;
	top: 0;
	overflow: hidden;
	@include transition(all .5s ease);
	h1{
		font-size: 42px;
		color: #fff;
		line-height: 230px;
		text-transform: uppercase;
		font-weight: 100;
		@include transition(all .3s ease);
	}
	nav{
		position: absolute;
		bottom: 0;
		height: 60px;
		line-height: 60px;
		width: 100%;
		background-color: rgba(0,0,0,.1);
		a{
			color: #fff;
			display: inline-block;
			padding: 10px 15px;
			line-height: 1;
			text-decoration: none;
       @include border-radius(2px);
        &:hover{
          @include box-shadow(0 0 0 1px #fff);
        }
		}
	}
}
h2{
	font-size: 34px;
	text-transform: uppercase;
	font-weight: 100;
	line-height: 2;
	color: #2c3e50;
}
p{
	margin-bottom: 2rem;
	line-height: 2;
	color: #7f8c8d;
}
.wrapper{
	width: 800px;
	margin: 0 auto;
}
section{
	padding: 20px;
	margin-bottom: 40px;
	background-color: #fff;
	@include border-radius(4px);
	@include box-shadow(0 1px 0 rgba(0,0,0,.2));
}
 
/* Sticky Header Style */	
/* ---------------------------------------- */ 
body.sticky-header{
	padding-top: 100px;
	header{
		height: 60px;
		background-color: rgba(52,152,219,.9);
		h1{
			@include scale(0);
		}
	}
}
 
</style>



JS

Finally add Jquery on page to make header animated while scrolling.

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script>
$(function(){
  $(window).scroll(function(){
    var winTop = $(window).scrollTop();
    if(winTop >= 30){
      $("body").addClass("sticky-header");
    }else{
      $("body").removeClass("sticky-header");
    }
  });
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD



Leave a Reply

Your email address will not be published. Required fields are marked *

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