Stickey Header - Refresh Issues

Ask the community
,
1

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.

2

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();
});
});

3

Just tried but it sadly doesn’t swap to the scroll header strip with that code. Is there anything else you can think of? Thanks for your help!

4

no

5

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.

6

Hello, thanks for this but I just tried it and the header stips no longer switch on scroll. Is there anything else you can think of? Thanks again!

7

https://www.wix.com/corvid/forum/community-discussion/refreshing-animated-header

8

Thank you will check it out!

9

Sorry @givemeawhisky I can’t get my head around it, I am getting through the wix corvid tutorials but not quick enough! Any help would be really appreciated, thank you.

My current code with out the refresh header working is:

$w.onReady( function () {

$w( "#headerTransitionPoint" ).onViewportLeave(() => { 
    $w( "#scrollingHeaderStrip" ).show(); 
    $w( "#defaultHeaderStrip" ).hide(); 
    $w( "#scrollingLogo" ).show(); 
    $w( "#defaultLogo" ).hide(); 
    $w( "#scrollingMenu" ).show(); 
    $w( "#defaultMenu" ).hide(); 
}) 
$w( "#headerTransitionPoint" ).onViewportEnter(() => { 
    $w( "#defaultHeaderStrip" ).show(); 
    $w( "#scrollingHeaderStrip" ).hide(); 
    $w( "#defaultLogo" ).show(); 
    $w( "#scrollingLogo" ).hide(); 
    $w( "#defaultMenu" ).show(); 
    $w( "#scrollingMenu" ).hide(); 
})

});

Adding--------?

import wixWindow from ‘wix-window’ ;

$w.onReady( function getBoundingRect(#scrollingHeaderStrip): Promise<windowSizeInfo.scroll.y;
});

wixWindow.getBoundingRect()
.then( (windowSizeInfo) => {
let scrollY = windowSizeInfo.scroll.y;

Thank you!