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.
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)); } 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