How to make white header background appear only on scroll?

Ask the community
,
1

I followed this video exactly, and still can’t get it to work.

I want my header to have a completely transparent background upon entering the site, but then when the viewer scrolls, I want the header to have a white background. How can I do this?

Here is my code (in the site tab):

export function header1_viewportLeave(event, $w) {
$w(‘whiteHeader’).show();
//Add your code for this event here:
}
export function header1_viewportEnter(event, $w) {
$w(‘whiteHeader’).hide();
//Add your code for this event here:
}

Any help would be much appreciated!!

2

Hi Lexy,

Your code is good, but the problem could be with the function itself.
Can you please click on the header (which has the header1 ID ) and check if the 2 functions (on viewPort enter/leave ) is clicked.


Also check if the functions names are the same ( in the properties and in the code ).

Hope this helps you.

Mustafa

3

Hi Mustafa,

Thanks for your response. I checked both those things, and it is still not working. The way I have it set up, I have a transparent strip and a white strip both added to the header, just like the video. When I go into preview mode and try to scroll, I see this:

1920×345 139 KB

4

Oops, we missed something!
A Hashtag " # " is missing in your code.

 export function header1_viewportLeave(event, $w) {
      $w('whiteHeader').show();  // should be $w("#whiteHeader").show();
       }
       export function header1_viewportEnter(event, $w) {  
          $w('whiteHeader').hide();  //should be $w("#whiteHeader").hide();
           }

Let me know if it worked.

Best,

Mustafa

5

Hi Mustafa,

Thanks for trying to help. I fixed the code as you suggested, and it still is not working. Nothing I do makes the white header appear on scroll. Anything else I could do?

1920×345 64.9 KB

6

Can you please send me the website link? so we can figure out what’s missing.

Thanks.

7

https://lexypraeger.wixsite.com/mysite

8

You are missing adding the onViewportEnter in the Header1 properties panel, Also the onViewportLeave function name is different from the one you are using in the code.

I recommend you to delete the code, also remove the function from the properties panel of ( Header1) and re-do it again :

  • Click on the header => in the properties panel add onViewportEnter / onViewportLeave => in the code editor add the hide/show just like what we did before.
9

Now it’s only showing the white header on top. The white header still does not appear on scroll. This is the opposite of what I want; how do I fix it?

10

Now it’s doing nothing again.

11

I got it to work!!! Thanks for your help! :slight_smile:

12

Glad you did it.

You welcome.

13

Hi, I’m having the same issue! Please help :slight_smile:

14

How did you make this happen Lexy? From start to finish please! I have a client that want this!