Invisible Header Background, fade to color on scroll

[sonanski]

http://www.scottonanski.com/

I’m trying to make the masthead invisible in its initial view, overlapping with the slider beneath, then have the slider fade into a solid color on scrolling down.

Not sure if that makes sense.

Any ideas how to do that? Thanks.

[paul.r]

Hi,

You need to set initial position to absolute. Then set background to transparent.

After that add a class to your bar and add the css code below in Header > CSS

.my-bar.x-bar-fixed {
    background-color:#333;
}

Hope that helps

[sonanski]

@paul.r

.my-bar.x-bar-fixed {
background-color:#333;
}

Thanks for the reply. It works in part. Now I just need the header to fade into its background-color on scrolling.

[sonanski]

Now it works. lol. Not sure how.

Here’s the CSS I edited in case anyone else wants to check it out;

.my-bar.x-bar-fixed {
transition: background-color 0.5s ease-in;
background-color: rgba(43, 43, 43, 0.98)
}

[christian]

You’re welcome.