Header Transition with Velo

Sometimes, you may want to start your website with one header, then as the user scrolls down, you want a different header. In this post, I will teach you how to use this technique on your sites with a little bit of code.

Of course, I have provided the code below and I specify what needs to be changed to make it work on your sites. Let's get started.

---

$w(‘#transitionStrip’).onViewportLeave(() => {
 	$w(‘#newHeader’).show(“fade”);
 	$w(‘#defaultHeader’).hide(“fade”);

})

$w(‘#transitionStrip’).onViewportEnter(() => {
 	$w(‘#defaultHeader’).show(“fade”);
 	$w(‘#newHeader’).hide(“fade”);

})

---

The "#transitionStrip" is the strip that you set up to start the transition. The names do not really matter, but you do need to make sure that the names are connected to whatever you named the strips. You do not necessarily need to copy my names.

The "#newHeader" needs to be the header design that the header transitions to after you hit the transition strip.

The "#defaultHeader" needs to be the header at the top of the page before coming into contact with the transition strip.