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

Ask the community
,
1

Hello,
i have problems with a frozen header that changes as visitors scroll. It is about the website www.gaertner-behn.de. Using Wix Code, I created a header animation on the website. I have followed exactly the guidelines of the tutorial (Wix Code | How to Create a Frozen Header That Changes as Visitors Scroll - YouTube). The header animation works basically. However, there is an error when the website loads at the first time. If the website is not fully loaded yet and you scroll down, the header animation will not work the first time. It seems that the website needs to be fully loaded so that the header animation works. Is it possible to accelerate the loading time of the header animation with a code, so that the head area is loaded first? Thanks for your help

2

Tested your site and the red background does not appear if you start scrolling before the whole page has loaded. Maybe you need to check if onReady first of all to activate the header menu or you will have to make sure you have some other measurement to check that all is loaded. Do you use color or image in the header as the red background? If you use an image change it to just use color, makes it way faster.

3

Hi Andreas,
i use color in the header as red background, no image. I’ll try to set the area onReady. Do I have to consider something in the code? I have already tried something. But that did not work because the code could not be read. Example:

export function header_viewportLeave(event) {
$(function() {
$w(“#redHeader”).show();
});
}
export function header_viewportEnter(event) {
$(function() {
$w(“#redHeader”).hide();
});
}