Creating a Frozen Header That Changes as Visitors Scroll

Hello,

I followed steps in the Wix Code video to change a header as the user scrolls, but it is not working.
Here is my header code:

export function header1_viewportLeave(event, $w) {
    $w('whiteHeader').show();
 //Add your code for this event here: 
}

export function header1_viewportEnter(event) {
    $w('whiteHeader').hide();
 //Add your code for this event here: 
}

I am receiving the error, “whiteHeader is not a valid selector”.

Here are screenshots of the 2 strip’s properties panels:

Thanks!

Hi Josh,

The error is letting you know the element has not been selected properly. You’re missing the # within the parenthesis inside your function. A valid selector should like this:

export function header1_viewportLeave(event, $w) {
    $w('#whiteHeader').show();
}

Check out this article for more info.
Hope this helps!

Good luck!

Hey Miguel,
I tried adding a # and it the error is gone, but the function is not working. The white header is now loading and sitting stationary.
Is there anything else that could be wrong?

The code is changed to:



export function header1_viewportEnter(event) {
    $w('#whiteHeader').show();
}

export function header1_viewportLeave(event, $w) {
    $w('#whiteHeader').show();
}

https://www.youtube.com/watch?v=6zS0OavqbAc&t=471s

https://russian-dima.wixsite.com/meinewebsite/reading-position

Perhaps this will help you.

EDIT: And here one more :grin:
https://www.youtube.com/watch?v=X0MpM3Ljt1I