Mail your problems to us on lawania@lavania.in, we will solve it and put the solution here at Lawania.com

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));
}
 
/* 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>
Share on Google Plus

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.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment