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.
First, it may be easier to watch this video. It will show you how to add to properly set up your header designs and add the code to make it function correctly.
Now that you have a grasp on how to set it up, here I will provide you with the code needed:
$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.
Now that you have all the information needed to create this transition header, it is time to apply this to your own website! Have fun!
Learn more about Wix here.