I used a little bit of code to create an animated look for my website’s header. It worked great last night, and this morning, but it has since stopped working. I have not edited the website since last night so I couldn’t have broken anything. When I finished with it I tested it on Chrome and Safari (on 2 Macbooks), Mobile Chrome and Mobile Safari (Android, iPhone and iPad devices).
It still works in Preview Mode on Wix.
Here is the code and some images of what is going on. Thanks everyone in advance!
www.fuegoconsulting.com
export function header1_viewportLeave() {
$w(“#strip1”).show();
$w(“#menu2”).hide();
}
export function header1_viewportEnter() {
$w(“#strip1”).hide();
$w(“#menu2”).show();
}
Hey Ben,
Wix headers can be finnicky, and sometimes all it takes is reassigning the code to a duplicated strip or something like that to get it working again. I take it the header that appears as you scroll down is actually not part of the header though? Because if you have set up your header to be fixed, you might want to change your viewport functions to be dependent on some other element.
1 Like
David,
Thank you for the fast reply!
I‘m thinking this is one of those finicky things because it worked last night and this morning on multiple devices, but now it doesnt.
The strip is a part of the header, it is a frozen header. I originally used an anchor but found the header condition to be more uniform, and a couple of postings recommend that instead. Both ways worked just fine for me up until a few hours ago.
@ben94809 My pleasure. In that case, I’d recommend either reverting to your last published version in your site history or else tinkering with it and publishing to get it working again. If it happens more than once, then I’d start looking around for anything that could be the culprit.
Hi @ben!
I have exactly(!) the same problem as you! I saw on your website that it works now. Could you please tell me how you did it?
To fix this I added an anchor to the header on all of my pages and I used the anchor as the reference instead of the header. Let me know if you’d like a screenshot or two. Good luck!
Thank you very much ben! That’s exactly what I was thinking about! Yes, I like to take a few screenshots!
Can you also send me please a screenshot of how you did that with the red stripe? So that it slowly turns red when you scroll down.
For the red stripe that is just an animation. There isn’t any code involved for that one. I’m glad you like it though!
This is the code that I used for the header is here below.
export function headeranchor_viewportLeave() {
$w(“#strip1”).show();
$w(“#menu2”).hide();
}
export function headeranchor_viewportEnter() {
$w(“#strip1”).hide();
$w(“#menu2”).show();
}
Thank you @ben this helped me out loads. Looks like attaching it to the header just randomly stopped working. Downside is now I have to put an anchor on every page instead of just one place 
oh well!
No problem Rend. Best of luck to you!
