# How to make white header background appear only on scroll?

**URL:** <https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946>\
**Category:** Ask the community\
**Tags:** code, design, question, wix-studio\
**Created:** [August 15, 2024, 5:15pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946 "2024-08-15T17:15:19Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dean\_Claassens](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dean_claassens/32/95679_2.png) [@Dean\_Claassens](https://forum.wixstudio.com/u/Dean_Claassens)\
**Post date:** [August 15, 2024, 5:15pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/1 "2024-08-15T17:15:19Z")

</div>

Hi all,

I’m trying to achieve the exact same thing this user is trying to do from this thread in 2018. See here - [How to make white header background appear only on scroll?](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/39145)

I also followed the instructions on the video in the above link.

Essentially: “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?”

I seemed to get somewhere by following the thread and then it ended when the OP had said they managed to figure it out without providing their solution.

Where I am at currently:

- I have two headers - 1 transparent. 1 white.
- The _viewportLeave_ and _viewportEnter_ functions have been configured accordingly.
- Both functions have been attributed to their corresponding events in the header ID.
- The design of my site already has a white header, however, I want a “PLAN MY TRIP” button to _only_ appear when a user begins to scroll.

Please let me know if you need further clarification.  
Any/all help is appreciated.

---

<div class="post-metadata">

**Author:** ![V-Blog](https://avatars.discourse-cdn.com/v4/letter/v/898d66/32.png) [@V-Blog](https://forum.wixstudio.com/u/V-Blog)\
**Post date:** [August 15, 2024, 5:41pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/2 "2024-08-15T17:41:05Z")

</div>

In the header inspector panel, there is an option “change color on scroll” right under the color. If you can’t see it, Set the header scroll effect to freeze in the inspector panel.

Set the initial color to transparent(set opacity to 0 or color to #ffffff). In the “change color on scroll” set the color to white and opacity to 100(or less)

---

<div class="post-metadata">

**Author:** ![Dean\_Claassens](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dean_claassens/32/95679_2.png) [@Dean\_Claassens](https://forum.wixstudio.com/u/Dean_Claassens)\
**Post date:** [September 16, 2024, 6:09am UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/3 "2024-09-16T06:09:13Z")

</div>

Hi there, thanks very much for your reply - this resolved the transparency issue I’m facing with the entire header.

The other thing that is still not working is the elements within the header.

I have a button in the header that I only want to appear when a user scrolls.  
On page load, the button should be hidden.  
On scroll, the button should appear.

Is there something I’m missing that could make this possible?

Thanks!

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [September 16, 2024, 8:07am UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/4 "2024-09-16T08:07:46Z")

</div>

Hi, Dean\_Claassens !!

Wix Studio has enhanced animations for scrolling, so the solution might be within those options. If not, you can set up a custom element to detect page scrolling, which can receive scroll events and likely solve the issue.

---

<div class="post-metadata">

**Author:** ![Dean\_Claassens](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dean_claassens/32/95679_2.png) [@Dean\_Claassens](https://forum.wixstudio.com/u/Dean_Claassens)\
**Post date:** [October 3, 2024, 2:36pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/5 "2024-10-03T14:36:27Z")

</div>

Hi there,

Many thanks for your feedback here.

I’m still struggling to get this to work.

Essentially, on load, I want this button to not be visible.  
I only want this button to appear when a user begins to scroll.  
How would I achieve this using a custom element that detects page scrolling?

Thanks again.

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [October 3, 2024, 2:49pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/6 "2024-10-03T14:49:05Z")

</div>

Hi, Dean. Wasn’t it possible to do it using `onViewportEnter` ?

---

<div class="post-metadata">

**Author:** ![Dean\_Claassens](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dean_claassens/32/95679_2.png) [@Dean\_Claassens](https://forum.wixstudio.com/u/Dean_Claassens)\
**Post date:** [October 4, 2024, 2:00pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/7 "2024-10-04T14:00:22Z")

</div>

Hi onemoretime, thanks again for following up.

Sadly not.  
This is the code I’m currently working with:

> $w(‘#button58’).onViewportEnter((event) =\> {  
> $w(‘#button58’).hide();  
> })

> $w(‘#button58’).onViewportLeave((event) =\> {  
> $w(‘#button58’).show();  
> })

The button is not visible when enterting the site.  
The button is still visible on hover, though.  
When scrolling, the button doesn’t appear like I want it to.

Essentially, what I’m trying to achieve is:

The button is **not** visible on enter and on however **until** a user scrolls.

Is this possible?

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [October 4, 2024, 4:45pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/9 "2024-10-04T16:45:32Z")

</div>

It feels a bit odd to attach viewport events to the target element itself that undergoes visibility changes…

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [October 5, 2024, 4:05pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/10 "2024-10-05T16:05:52Z")

</div>

Hi Dean, how about simplifying the issue a bit? On your site’s pages, there are probably multiple sections or elements lined up. If you set `onViewportEnter` or `onViewportLeave` at regular intervals for these multiple elements, one of them is likely to trigger as the page scrolls. This would also detect scrolling, so you could toggle the button’s visibility based on that. Would a simple method like this work for you? 🤔

---

<div class="post-metadata">

**Author:** ![Dean\_Claassens](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dean_claassens/32/95679_2.png) [@Dean\_Claassens](https://forum.wixstudio.com/u/Dean_Claassens)\
**Post date:** [October 16, 2024, 7:05pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/11 "2024-10-16T19:05:10Z")

</div>

Thanks again for your help here, I really do appreciate it.

I like this suggestion - but how would I go about executing this successfully?

Thank you!

---

<div class="post-metadata">

**Author:** ![Dean\_Claassens](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dean_claassens/32/95679_2.png) [@Dean\_Claassens](https://forum.wixstudio.com/u/Dean_Claassens)\
**Post date:** [November 1, 2024, 1:19pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/12 "2024-11-01T13:19:15Z")

</div>

Hey @onemoretime - just following up on this to see if you can assist?  
If possible, a screenshot of your solution that I can easily follow would be ideal!

Many thanks in advance.

---

<div class="post-metadata">

**Author:** ![onemoretime](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/onemoretime/32/104023_2.png) [@onemoretime](https://forum.wixstudio.com/u/onemoretime)\
**Post date:** [November 1, 2024, 4:24pm UTC](https://forum.wixstudio.com/t/how-to-make-white-header-background-appear-only-on-scroll/61946/13 "2024-11-01T16:24:59Z")

</div>

Hi, it’s been a while! Ideally, using custom elements to detect scrolling would be the best solution, but there’s a lot to understand before implementing it. So, the idea here is to find a workaround using a simpler method. What I’m talking about would look something like this in code.

```javascript
$w.onReady(function () {

    const sectionIds = ["#section1", "#section2", "#section3", "#section4", "#section5"];

    sectionIds.forEach(id => {
        $w(id).onViewportEnter(() => {
            onScroll();
        });
    });

});

function onScroll() {
    // Do something here if needed.
}

```