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.

---

$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!