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.

CSS

Add CSS on page to styling Sticky Header.

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.

Related