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.
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>
About
Prof. Krishan Kant Lavania
This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
0 comments:
Post a Comment