Header fade in on scroll?

[Cairns]

Is it possible to have a header bar load as transparent and then fade in on scroll?
I’m not having much luck understanding the scroll functionality in the effects tab.
I want this to be triggered on scroll; I don’t want a timed animation.

You’ll see that I have two bars set up. Bar 1 holds the transparent-to-white background I want to fade in. Bar 2 holds the menu, and has a negative top margin so as to appear over Bar 1.

[ruenel]

Hello Dan,

Thanks for writing in! To hide the bar and then display it only after scrolling the page, please do this:
1.) In your bar settings, you have to enable the “Hide Initially” in the Sticky option.

2.) In your Effects settings, the base opacity is set to 0. The Scroll In opacity must be 0 as well.

Hope this helps.

[Cairns]

Here is a link to a screen recording of my results.

Here is what happens when I remove the negative top margin from the second bar.

Honestly, is this even possible with the theme’s built-in functionality? I’m not upset, I just don’t want to waste my time.

[ruenel]

Hello Dan,

The effects module may not work for your current setup. I created another header for a demonstration. Do you want something like this instead:

• see the secure note

This example header is using a custom CSS which was taken from an old thread: How to add on hover effect to my custom CSS background button? (code included partially)
In the old thread, the background color changes as you scroll the page. In the sample header, it only goes from transparent to opaque.

Hope this works out for you.