Header Transition in Wix (2022)

Learn how to have your header transition to a new design as the user scrolls down your website.

This post is an update because Wix has since updated the Wix Classic editor so the old method no longer works for websites made in the newer editors.

Before you insert the code, watch this video to learn how to properly set up your site:

LINK TO VIDEO

Now that you know how to set it up, below is the code that you will need:

---

$w('#newHeader').hide(); export function transitionStrip_viewportEnter(event) { $w('#newHeader').show(); $w('#defaultHeader').hide("fade"); } export function returnStrip_viewportEnter(event) { $w('#defaultHeader').show("fade"); $w('#newHeader').hide("fade"); }

---

Make sure you name your elements the same as the code or change the code to match what you named your strips and elements. "#newHeader" and "#defaultHeader" should be the name of your header designs. "transitionStrip" and "returnStrip" should be the name of the hidden strips on the page that activate the code.

Have Fun!