Animated Header on Page Scroll
Posted By : Gaurav Arora | 30-Dec-2016
Hi, As we all know that animated header has become very common among websites. They can be simple created by including animated header's js files. But we can easily create that thing without including any js file. But with the help of some jquery function that will detect the page scroll.
We will start by including our HTML part.
Header
After that we will include some css to animate our header.
section{
width: 100%;
min-height: 1000px;
float: left;
}
header{
width: 100%;
padding: 30px;
float: left;
background: #303030;
text-align: center;
color: #fff;
transition: all ease-in 0.2s;
}
header.fix{
position: fixed;
padding: 20px;
animation-name: animate-header;
animation-duration: 0.5s;
}
header h1{
margin:0;
padding: 0;
font-size: 30px;
font-weight: normal;
transition: all ease-in 0.2s;
}
@keyframes animate-header{
from{
transform: translateY(-100%);
}
to{
transform: translateY(0);
}
}
Now we will add window.scroll(function() so that we can add and remove our animated class on scroll
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$("header").addClass("fix");
}else{
$("header").removeClass("fix");
}
});
In this way we can animate our header on scroll
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.