Hi, I’ve followed the steps directed in Wix.com’s official video, “How to Create a Frozen Header That Changes as Visitors Scroll.”
https://www.youtube.com/watch?v=ri98D-oZJnw
Coding:
It works perfectly in Preview mode – I have one header strip that appears at first, and a second header strip that replaces it when you scroll down.
But the effect doesn’t work on the live site at all. I’m seeing comments on Youtube all for this same issue, so clearly something is missing.
Is there additional coding I need to add? Or an alternate solution to try?
1 Like
i can second that , i have searched all forum there are many many people with similar issues, it seems they have allowed us to preview with the javascript running fine and when we visit on live site the script is not running or is unable to get the other elements , i really dont understand when will their customer service wake up?
I’ve got the same issue. Any news on this?
it works perfectly fine now 
Many thanks for the advice…
Thank you Yohan! But I must have something wrong. Instead of my #transparentHeader appearing first and then my #whiteHeader appearing after scrolling, its the reverse.
I have “Hidden on Load” selected on my #whiteHeader strip. Nothing selected on transparent one.
My code is now:
export function header_viewportLeave(event) {
$w('#whiteHeader').show();
}
export function header_viewportEnter(event) {
$w('#whiteHeader').hide();
}
import wixWindow from 'wix-window';
$w.onReady(() => {
let headerSize = 75; // pixels
let checkInterval = 250; // milliseconds
setInterval(() => {
wixWindow.getBoundingRect().then((windowRectInfo) => {
if (windowRectInfo.scroll.y > headerSize) {
$w('#whiteHeader').hide(); // name of top header strip
console.log("Hide top header");
} else {
$w('#whiteHeader').show(); // name of top header strip
console.log("Show top header");
}
});
}, checkInterval);
});
Yes i had a similar problem but what i have figured out so far is export function is not hiding or collapsing anything for now ; its due to the new rollout , the only way to play with your elements is import window function then use some code to trigger scroll header .also hidden on load will not work untill they do something about it
