How to Create a Frozen Header That Changes as Visitors Scroll

Discussion Ask a question
,
1

I want to create a frozen header that changes as visitors scroll. I found this wix code video: Wix Code | How to Create a Frozen Header That Changes as Visitors Scroll - YouTube which explains the process. I can’t read the line of code, does anyone know what it is and where I add it? Thanks

2

Hi,
The code is:

export function header1_viewportLeave(event, $w) { 
   $w('#whiteHeader').show();  
} 

export function header1_viewportEnter(event, $w) {  
   $w('#whiteHeader').hide();  
}

You should make sure that the IDs of the code match the IDs of the elements.

Best,
Tal.

3

I’m having problems with this too. I tried to copy and paste your code but it wouldn’t let me. Any ideas?

4

You can check out my tutorial on this:

Links to tutorial sites:

https://codequeen.wixsite.com/floating-header
https://codequeen.wixsite.com/new-shrinking-header
https://codequeen.wixsite.com/animated-header

2 Likes
5

your tutorials are excellent. BUT you do not give clear indication on what the codes are?
Where do you put them and what are the codes?
Still confused.

6

If you have never coded before I recommend watching Wix Code basics videos first (search any on YouTube) to learn how to navigate around the editor and use all the code functions properly (page code tab, site code tab, properties panel, developer tools)

To get the code visit the tutorial site links shared above. Each site has a different code for a different animation as explained in the video. The title of each code indicates what section to add your code (again, learned in the basics video).

1 Like