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

Was this article helpful ?

45 people consider this article helpful
Thank you! We will improve this article.

Didn’t find what you’re looking for? Please let us know

Submit a ticket