Header Background on scrolldown

Ask the community
,
1

I simply want there to be a header color that fades behind the menu when I scroll down. THen when I scroll back up, I want it to fade away.

See example:

http://rhino.media

Please help me to get the header to respond like that one

2

Hi,
You can review the correspondence regarding creating a sticky menu here .

Best,
Tal.

3

Not helpful at all. I have read everything in there and it does not work. please give me a simple solution

4

Hi,
You can check out this video tutorial.

Best,
Tal.

5

I have tried searching for hours to fix this… please help
i want my header to appear large. then shrink to a smaller version on scroll
current set up - 2 strips and one anchor in header… smaller strip is at the top under the big strip, the big strip is the size of the full header. The small strip is set as hidden on load. and this is the code that is on the site tab
export function anchorheader_onviewportLeave() {
$w(" #stripsmall “).show();
$w(” #bigstrip “).hide();
}
export function anchorheader_onviewportEnter() {
$w(” #stripsmall “).hide();
$w(” #bigstrip ").show();
}

1920×1037 335 KB

6

Have you checked the video tutorial? If the issue still persists, please send us the site URL so that I can have a look.

Tal.

7

royalsynergyproductions.com i have moved things around so many times and tried so many things… i just need like iti written out!

8

I’ve been trying to get a similar effect. I’ve managed to get the two strips fading in/out over half a second using the code below (obviously, change your naming). You can also had a delay if you want. Any of the other Wix animation types can be added in this way.

I’d really like to be able to smoothly animate the shrinking of the header, so if anyone knows how to do that it would be greatly appreciated.

//Display Secondary Header on Scroll

let fadeOptions = {
“duration”: 500,
“delay”: 0
};

export function intelliHeader01_viewportLeave(event) {
$w(‘#stripSM’).show(“fade”, fadeOptions);
$w(‘#stripLG’).hide(“fade”, fadeOptions);
}

export function intelliHeader01_viewportEnter(event) {
$w(‘#stripSM’).hide(“fade”, fadeOptions);
$w(‘#stripLG’).show(“fade”, fadeOptions);
}