Animated Header (changes when user scrolls down)

Ask the community
,
1

Hi everyone, I have an issue with my Animated header
I created two strips that I’ve attached to the header. I would like the first one (called “mainStrip”) to be shown when the user enter the site, and the other one (called “whiteStrip”), appear when the user scrolls down.
I manage to do this whit the anchor_viewportLeave and anchor_viewportEnter, but I can’t make it work with the header_viewportLeave and Enter, and I don’t understand why.
The problem with the anchor is that I’d have to put it on every pages of my site, while with the header_viewport function I’d just have to put it on the site code.

Here is the code that I tried to use but isn’t working (I did this thanks to what I’ve found arround the internet, as I don’t know much about code)

export function header_viewportEnter(event) {
$w(‘#whiteStrip’).hide()
$w(‘#mainStrip’).show();
//Add your code for this event here:
}

export function header_viewportLeave(event) {
$w(‘#whiteStrip’).show();
$w(‘#mainStrip’).hide();
//Add your code for this event here:
}

Hope someone could help me figure out this thing! Thank’s a lot

2

Hello,

If your header is set to be Frozen, this will probably not work as technically the header will not leave the viewport.
Changing the Header Scroll Settings

Refer to the tutorial below that should help you achieve your goal:
https://support.totallycodable.com/en/article/floating-header-animated-header-shrinking-header-using-wix-code

3

I’ve been working on that video, and I wasn’t able to make it work on my web site with this code :

export function header1_viewportLeave(event) {

$w( '#mainStrip' ).hide();

$w( ‘#whiteStrip’ ).show(); //this is the strip that is hidden on load because it will appear when the person scrolls down

}

export function header1_viewportEnter(event) {

$w( '#mainStrip' ).show();

$w( ‘#whiteStrip’ ).hide(); //this is the strip that is hidden on load

}