Hello, was hoping someone could give me a hand on this (problem at the end of post).
I have implemented the code to change my header on scroll to an alternative header, I need it as I am changing the background, font colour and logo colour on scroll. It works great, as I scroll I pass over a transparent strip which initiates the change, I used the following code:
$w.onReady(function () { $w("#headerTransitionPoint").onViewportLeave(() => { $w("#scrollingHeaderStrip").show(); $w("#defaultHeaderStrip").hide(); }) $w("#headerTransitionPoint").onViewportEnter(() => { $w("#defaultHeaderStrip").show(); $w("#scrollingHeaderStrip").hide(); }) });
$w.onReady(function () { $w("#headerTransitionPoint").onViewportLeave(() => { $w("#scrollingLogo").show(); $w("#defaultLogo").hide(); }) $w("#headerTransitionPoint").onViewportEnter(() => { $w("#defaultLogo").show(); $w("#scrollingLogo").hide(); })
My issue is that when I am halfway down a page and click reload the default header shows not the scroll one and I don't know how to change that.
Would really appreciate any help with this, thank you.
Using this example.
https://www.wix.com/corvid/example/sticky-header
When you reload the page, then the code for that page will reload as well so you will get the original header and not the changed version.
Page reloads and the onViewportEnter event handler function will have not happened and you would need to trigger it again for it to show the changed one.
Also as Ayleung has stated already, you don't need the multiple onReady page functions in your code, you only need the one.
Can you try something like this:
$w.onReady(function () {
$w("#headerTransitionPoint").onViewportLeave(() => { $w("#scrollingHeaderStrip").show();
$w("#defaultHeaderStrip").hide();
$w("#scrollingLogo").show();
$w("#defaultLogo").hide();
});
$w("#headerTransitionPoint").onViewportEnter(() => { $w("#defaultHeaderStrip").show();
$w("#scrollingHeaderStrip").hide();
$w("#defaultLogo").show();
$w("#scrollingLogo").hide();
});
});