I'm redesigning my site, and on the home page (https://aaronhelgeson.wixsite.com/mysite) I'm trying to change between a translucent and transparent header on scrolldown.
However, the translucent header doesn't load when scrolling down.
Any help?
Here's the code I'm using...
$w.onReady(function () {
$w('#translucentHeader').hide();
$w('#transparentHeader').show();
});
export function header_viewportLeave(event) {
let fadeOptions = {
"duration": 300,
"delay": 0
};
$w('#translucentHeader').show("fade", fadeOptions);
$w('#transparentHeader').hide("fade", fadeOptions);
}
export function header_viewportEnter(event) {
let fadeOptions = {
"duration": 300,
"delay": 0
};
$w('#translucentHeader').hide("fade", fadeOptions);
$w('#transparentHeader').show("fade", fadeOptions);
}
Got it to work after deleting the initial hide and show events.
Here's the working code...
$w.onReady(function () { $w("#anchorHeader").onViewportLeave(() => { let fadeOptions = { "duration": 300, "delay": 0 }; $w('#translucentHeader').show("fade", fadeOptions); $w('#transparentHeader').hide("fade", fadeOptions); }) $w("#anchorHeader").onViewportEnter(() => { let fadeOptions = { "duration": 300, "delay": 0 }; $w('#translucentHeader').hide("fade", fadeOptions); $w('#transparentHeader').show("fade", fadeOptions); }) })
Hi,
It seems you’re missing a trigger point like and anchor to let the viewport know when you’ve scrolled past a certain point.
Feel free to follow this Wix example here, which provides the exact code you'll need to implement this functionality.
I hope this works for you!
Best regards,
Miguel
In the header properties, onViewportEnter sends a "header_viewportEnter" event, and onViewportLeave sends a "header_viewportLeave" event.
Should I be putting something in the #translucentHeader and #transparentHeader properties too?
Hi 🖐
Are they exist in their element's properties panel?