# How to Create a Frozen Header That Changes as Visitors Scroll

**URL:** <https://forum.wixstudio.com/t/how-to-create-a-frozen-header-that-changes-as-visitors-scroll/20420>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [August 2, 2018, 3:53pm UTC](https://forum.wixstudio.com/t/how-to-create-a-frozen-header-that-changes-as-visitors-scroll/20420 "2018-08-02T15:53:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![anna1](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anna1](https://forum.wixstudio.com/u/anna1)\
**Post date:** [August 2, 2018, 3:53pm UTC](https://forum.wixstudio.com/t/how-to-create-a-frozen-header-that-changes-as-visitors-scroll/20420/1 "2018-08-02T15:53:54Z")

</div>

I want to create a frozen header that changes as visitors scroll. I found this wix code video: [https://www.youtube.com/watch?v=8iO0G\_qWqRY](https://www.youtube.com/watch?v=8iO0G_qWqRY) which explains the process. I can’t read the line of code, does anyone know what it is and where I add it? Thanks

---

<div class="post-metadata">

**Author:** ![\_tal](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_tal/32/669_2.png) [@\_tal](https://forum.wixstudio.com/u/_tal)\
**Post date:** [August 6, 2018, 7:27am UTC](https://forum.wixstudio.com/t/how-to-create-a-frozen-header-that-changes-as-visitors-scroll/20420/2 "2018-08-06T07:27:27Z")

</div>

Hi,  
The code is:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![ihguide](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ihguide/32/106663_2.png) [@ihguide](https://forum.wixstudio.com/u/ihguide)\
**Post date:** [August 31, 2018, 2:37pm UTC](https://forum.wixstudio.com/t/how-to-create-a-frozen-header-that-changes-as-visitors-scroll/20420/3 "2018-08-31T14:37:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![code-queen](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-queen/32/696_2.png) [@code-queen](https://forum.wixstudio.com/u/code-queen)\
**Post date:** [September 1, 2018, 2:20pm UTC](https://forum.wixstudio.com/t/how-to-create-a-frozen-header-that-changes-as-visitors-scroll/20420/4 "2018-09-01T14:20:01Z")

</div>

You can check out my tutorial on this:

Links to tutorial sites:

[https://codequeen.wixsite.com/floating-header](https://codequeen.wixsite.com/floating-header)  
[https://codequeen.wixsite.com/new-shrinking-header](https://codequeen.wixsite.com/new-shrinking-header)  
[https://codequeen.wixsite.com/animated-header](https://codequeen.wixsite.com/animated-header)

[![](https://us1.discourse-cdn.com/wix/original/3X/1/d/1d9070d8173dc806d051f6e1955b3e62f283e222.jpeg "Wix Header Change on Scroll - Floating, Shrinking, Scrolling, Animated") ](https://www.youtube.com/watch?v=6zS0OavqbAc)

---

<div class="post-metadata">

**Author:** ![ihguide](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ihguide/32/106663_2.png) [@ihguide](https://forum.wixstudio.com/u/ihguide)\
**Post date:** [September 4, 2018, 10:26am UTC](https://forum.wixstudio.com/t/how-to-create-a-frozen-header-that-changes-as-visitors-scroll/20420/5 "2018-09-04T10:26:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![code-queen](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-queen/32/696_2.png) [@code-queen](https://forum.wixstudio.com/u/code-queen)\
**Post date:** [September 4, 2018, 2:42pm UTC](https://forum.wixstudio.com/t/how-to-create-a-frozen-header-that-changes-as-visitors-scroll/20420/6 "2018-09-04T14:42:14Z")

</div>

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).