How to make white header background appear only on scroll?

Ask the community
, , ,
1

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?

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.

2

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)

3

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!

4

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.

5

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.

6

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

7

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?

9

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

10

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? :thinking: