Sticky Header

In this video you will learn how to create an animated sticky header using Zion Builder. Just hit play and enjoy.

The following scripts are needed to achieve the header animation from this tutorial.

Header scripts

<script>
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
	var element = document.getElementById("navheader");
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
     element.classList.add("smallsize");
  } else {
    element.classList.remove("smallsize");
  }
}
</script>

Custom css

/*css for sticky header*/
.smallsize{height:100px!important;}