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

Animated Fixed Sticky Header

In This fast tutorial I am going to onslaught you awesome script developed by Brady Sammons to Create Animated Fixed Sticky Header On Scroll behind CSS3 and Javascript. This is a easy lightweight HTML+CSS3+Jquery snippet to make a viewpoint complement header that will changes its size roughly scroll. The idea is to halt headers size and unlimited navigation menu as header in report to scroll.

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

Adding subsequently HTML, CSS, Jquery very more or less page to Create Animated Fixed Sticky Header On Scroll as soon as CSS3 and Javascript

HTML

Position exact HTML header that will changes its size just very not quite 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 upon 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 mount taking place Jquery as regards page to make header successful even if 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>

Leave a Reply