Problems with loading time of a frozen header that changes as visitors scroll

Ask the community
,
1

Hello,
I have problems with the loading time of the frozen header that changes as visitors scroll on my website www.gaertner-behn.de . The header animation works basically, but the red background does not appear if I start scrolling before the whole page has loaded at the first time. I have followed exactly the guidelines of the tutorial ( https://www.youtube.com/watch?v=8iO0G_qWqRY ). Is it possible to improve the loading time of the header element with an other code.

I use this code:
export function header_viewportLeave(event) {
$w(“#redHeader”).show();
}
export function header_viewportEnter(event) {
$w(“#redHeader”).hide()
}
Thanks for your help!

2

Hi there:

This may be a rendering effect. There are a couple of things you might want to try.

  1. Instead of using the exported functions try using the element equivalent from inside the page’s onReady function ( you will need to delete the other function calls and trash the bindings on the element property panel):
$w.onReady(() => {
    $w('#header').onViewportEnter((event) => {
        $w('#redHeader').hide();
    });
    
    $w('#header').onViewportLeave((event) => {
        $w('#redHeader').show();
    });
})
  1. Take a look at the render cycle documentation and see if you need to force these handlers to be called on render cycle 1.
    Velo: About the Page Rendering Process | Help Center | Wix.com

Hope one of these helps.