Headroom.js with Bootstrap: Hide header menu on scroll down and Show menu on scroll up

Here w3 tweaks explored the hide and show the header on scroll using headroom.js and Bootstrap. On scroll up hide the header and scroll down show the header. This Headerroom.js designed only for header show and hide on scroll up and down.

This tutorial will explain four different types of animation effects on hide and show the header using Headroom.js and Bootstrap.

We can start our tutorial. Include all dependency in the HTML file. This demo will support all modern browsers

 <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- Headroom.js Core JavaScript --> <script src="https://npmcdn.com/headroom.js"></script>

Include common CSS Style

 .animated {     -webkit-animation-duration: .5s;     -moz-animation-duration: .5s;     -o-animation-duration: .5s;     animation-duration: .5s;     -webkit-animation-fill-mode: both;     -moz-animation-fill-mode: both;     -o-animation-fill-mode: both;     animation-fill-mode: both }

slideDown and slideUp the header on scroll down and scroll up

Download Demo

Slid Down CSS keyframes

Create keyframs for slidedown animation and use that in css animation name

 @-webkit-keyframes slideDown {     0% {         -webkit-transform: translateY(-100%)     }     100% {         -webkit-transform: translateY(0)     } } @-moz-keyframes slideDown {     0% {         -moz-transform: translateY(-100%)     }     100% {         -moz-transform: translateY(0)     } } @-o-keyframes slideDown {     0% {         -o-transform: translateY(-100%)     }     100% {         -o-transform: translateY(0)     } } @keyframes slideDown {     0% {         transform: translateY(-100%)     }     100% {         transform: translateY(0)     } } .animated.slideDown {     -webkit-animation-name: slideDown;     -moz-animation-name: slideDown;     -o-animation-name: slideDown;     animation-name: slideDown }

SlidUp CSS keyframes

Create keyframs for slideup animation and use that in css animation name

 @-webkit-keyframes slideUp {     0% {         -webkit-transform: translateY(0)     }     100% {         -webkit-transform: translateY(-100%)     } } @-moz-keyframes slideUp {     0% {         -moz-transform: translateY(0)     }     100% {         -moz-transform: translateY(-100%)     } } @-o-keyframes slideUp {     0% {         -o-transform: translateY(0)     }     100% {         -o-transform: translateY(-100%)     } } @keyframes slideUp {     0% {         transform: translateY(0)     }     100% {         transform: translateY(-100%)     } } .animated.slideUp {     -webkit-animation-name: slideUp;     -moz-animation-name: slideUp;     -o-animation-name: slideUp;     animation-name: slideUp }

JavaScript

 jQuery( document ).ready(function(){ // navbar is the header tag id name     var header = document.querySelector("#navbar");     var headroom = new Headroom(header, {         offset : 205,         tolerance: {           down : 10,           up : 20         },         classes: {           initial: "animated",           pinned: "slideDown",           unpinned: "slideUp"         }     });     headroom.init(); });

SwingIn and SwingOut the header on scroll down and scroll up

Download Demo

SwingIn CSS keyframes

Create keyframs for SwingIn animation and use that in css animation name

 @-webkit-keyframes swingInX {     0% {         -webkit-transform: perspective(400px) rotateX(-90deg)     }     100% {         -webkit-transform: perspective(400px) rotateX(0deg)     } } @-moz-keyframes swingInX {     0% {         -moz-transform: perspective(400px) rotateX(-90deg)     }     100% {         -moz-transform: perspective(400px) rotateX(0deg)     } } @-o-keyframes swingInX {     0% {         -o-transform: perspective(400px) rotateX(-90deg)     }     100% {         -o-transform: perspective(400px) rotateX(0deg)     } } @keyframes swingInX {     0% {         transform: perspective(400px) rotateX(-90deg)     }     100% {         transform: perspective(400px) rotateX(0deg)     } } .animated.swingInX {     -webkit-transform-origin: top;     -moz-transform-origin: top;     -ie-transform-origin: top;     -o-transform-origin: top;     transform-origin: top;     -webkit-backface-visibility: visible !important;     -webkit-animation-name: swingInX;     -moz-backface-visibility: visible !important;     -moz-animation-name: swingInX;     -o-backface-visibility: visible !important;     -o-animation-name: swingInX;     backface-visibility: visible !important;     animation-name: swingInX }

SwingOut CSS keyframes

Create keyframs for swingout animation and use that in css animation name

 @-webkit-keyframes swingOutX {     0% {         -webkit-transform: perspective(400px) rotateX(0deg)     }     100% {         -webkit-transform: perspective(400px) rotateX(-90deg)     } } @-moz-keyframes swingOutX {     0% {         -moz-transform: perspective(400px) rotateX(0deg)     }     100% {         -moz-transform: perspective(400px) rotateX(-90deg)     } } @-o-keyframes swingOutX {     0% {         -o-transform: perspective(400px) rotateX(0deg)     }     100% {         -o-transform: perspective(400px) rotateX(-90deg)     } } @keyframes swingOutX {     0% {         transform: perspective(400px) rotateX(0deg)     }     100% {         transform: perspective(400px) rotateX(-90deg)     } } .animated.swingOutX {     -webkit-transform-origin: top;     -webkit-animation-name: swingOutX;     -webkit-backface-visibility: visible !important;     -moz-animation-name: swingOutX;     -moz-backface-visibility: visible !important;     -o-animation-name: swingOutX;     -o-backface-visibility: visible !important;     animation-name: swingOutX;     backface-visibility: visible !important }

JavaScript

 jQuery( document ).ready(function(){ // navbar is the header tag id name     var header = document.querySelector("#navbar");     var headroom = new Headroom(header, {         offset : 205,         tolerance: {           down : 10,           up : 20         },         classes: {           initial: "animated",           pinned: "swingInX",           unpinned: "swingOutX"         }     });     headroom.init(); });

FlipIn and FlipOut the header on scroll down and scroll up

Download Demo

FlipIn CSS keyframes

Create keyframs for FlipIn animation and use that in css animation name

 @-webkit-keyframes flipInX {     0% {         -webkit-transform: perspective(400px) rotateX(90deg);         opacity: 0     }     100% {         -webkit-transform: perspective(400px) rotateX(0deg);         opacity: 1     } } @-moz-keyframes flipInX {     0% {         -moz-transform: perspective(400px) rotateX(90deg);         opacity: 0     }     100% {         -moz-transform: perspective(400px) rotateX(0deg);         opacity: 1     } } @-o-keyframes flipInX {     0% {         -o-transform: perspective(400px) rotateX(90deg);         opacity: 0     }     100% {         -o-transform: perspective(400px) rotateX(0deg);         opacity: 1     } } @keyframes flipInX {     0% {         transform: perspective(400px) rotateX(90deg);         opacity: 0     }     100% {         transform: perspective(400px) rotateX(0deg);         opacity: 1     } } .animated.flipInX {     -webkit-backface-visibility: visible !important;     -webkit-animation-name: flipInX;     -moz-backface-visibility: visible !important;     -moz-animation-name: flipInX;     -o-backface-visibility: visible !important;     -o-animation-name: flipInX;     backface-visibility: visible !important;     animation-name: flipInX }

FlipOut CSS keyframes

Create keyframs for flipout animation and use that in css animation name

 @-webkit-keyframes flipOutX {     0% {         -webkit-transform: perspective(400px) rotateX(0deg);         opacity: 1     }     100% {         -webkit-transform: perspective(400px) rotateX(90deg);         opacity: 0     } } @-moz-keyframes flipOutX {     0% {         -moz-transform: perspective(400px) rotateX(0deg);         opacity: 1     }     100% {         -moz-transform: perspective(400px) rotateX(90deg);         opacity: 0     } } @-o-keyframes flipOutX {     0% {         -o-transform: perspective(400px) rotateX(0deg);         opacity: 1     }     100% {         -o-transform: perspective(400px) rotateX(90deg);         opacity: 0     } } @keyframes flipOutX {     0% {         transform: perspective(400px) rotateX(0deg);         opacity: 1     }     100% {         transform: perspective(400px) rotateX(90deg);         opacity: 0     } } .animated.flipOutX {     -webkit-animation-name: flipOutX;     -webkit-backface-visibility: visible !important;     -moz-animation-name: flipOutX;     -moz-backface-visibility: visible !important;     -o-animation-name: flipOutX;     -o-backface-visibility: visible !important;     animation-name: flipOutX;     backface-visibility: visible !important }

JavaScript

 jQuery( document ).ready(function(){ // navbar is the header tag id name     var header = document.querySelector("#navbar");     var headroom = new Headroom(header, {         offset : 205,         tolerance: {           down : 10,           up : 20         },         classes: {           initial: "animated",           pinned: "flipInX",           unpinned: "flipOutX"         }     });     headroom.init(); });

BounceInDown and BounceOutUp the header on scroll down and scroll up

Download Demo

BounceInDown CSS keyframes

Create keyframs for BounceInDown animation and use that in css animation name

 @-webkit-keyframes bounceInDown {     0% {         opacity: 0;         -webkit-transform: translateY(-200px)     }     60% {         opacity: 1;         -webkit-transform: translateY(30px)     }     80% {         -webkit-transform: translateY(-10px)     }     100% {         -webkit-transform: translateY(0)     } } @-moz-keyframes bounceInDown {     0% {         opacity: 0;         -moz-transform: translateY(-200px)     }     60% {         opacity: 1;         -moz-transform: translateY(30px)     }     80% {         -moz-transform: translateY(-10px)     }     100% {         -moz-transform: translateY(0)     } } @-o-keyframes bounceInDown {     0% {         opacity: 0;         -o-transform: translateY(-200px)     }     60% {         opacity: 1;         -o-transform: translateY(30px)     }     80% {         -o-transform: translateY(-10px)     }     100% {         -o-transform: translateY(0)     } } @keyframes bounceInDown {     0% {         opacity: 0;         transform: translateY(-200px)     }     60% {         opacity: 1;         transform: translateY(30px)     }     80% {         transform: translateY(-10px)     }     100% {         transform: translateY(0)     } } .animated.bounceInDown {     -webkit-animation-name: bounceInDown;     -moz-animation-name: bounceInDown;     -o-animation-name: bounceInDown;     animation-name: bounceInDown }

BounceOutUp CSS keyframes

Create keyframs for BounceOutUp animation and use that in css animation name

 @-webkit-keyframes bounceOutUp {     0% {         -webkit-transform: translateY(0)     }     30% {         opacity: 1;         -webkit-transform: translateY(20px)     }     100% {         opacity: 0;         -webkit-transform: translateY(-200px)     } } @-moz-keyframes bounceOutUp {     0% {         -moz-transform: translateY(0)     }     30% {         opacity: 1;         -moz-transform: translateY(20px)     }     100% {         opacity: 0;         -moz-transform: translateY(-200px)     } } @-o-keyframes bounceOutUp {     0% {         -o-transform: translateY(0)     }     30% {         opacity: 1;         -o-transform: translateY(20px)     }     100% {         opacity: 0;         -o-transform: translateY(-200px)     } } @keyframes bounceOutUp {     0% {         transform: translateY(0)     }     30% {         opacity: 1;         transform: translateY(20px)     }     100% {         opacity: 0;         transform: translateY(-200px)     } } .animated.bounceOutUp {     -webkit-animation-name: bounceOutUp;     -moz-animation-name: bounceOutUp;     -o-animation-name: bounceOutUp;     animation-name: bounceOutUp }

JavaScript

 jQuery( document ).ready(function(){ // navbar is the header tag id name     var header = document.querySelector("#navbar");     var headroom = new Headroom(header, {         offset : 205,         tolerance: {           down : 10,           up : 20         },         classes: {           initial: "animated",           pinned: "bounceInDown",           unpinned: "bounceOutUp"         }     });     headroom.init(); });