Parallax website-Transparent Header content overflow

[Raghu372]

Hi,

Am trying to build a parallax style website, in that am using a multiple color image as background. The header area background transparent and fixed. While scrolling the up/down the content looks like overlap on the header area coz of transparent, I would like to hide page content on header area while scrolling top and show content on scrolling down but at the same time I can’t place background as fixed it has to scroll top/down.

RAghu

[Paulie_D]

It’s not clear what the issue is but, if I am reading this correctly….

You have a fixed position header that is transparent….content scrolls behind it and so it’s visible behind the header.

Which you don’t want….is that right?

Not sure how you can solve that one other than *not** using a transparent header.

Of course, depending on what it is you are trying to do you could have the header as transparent until the site is scrolled at which point it could become opaque….but that would require javascript / jquery.

[Raghu372]

Hi Paulie,

Thanks for quick response

Exactly, that is what am trying to explain. I know jquery and javascript have to use and I have tried couple of things but that doesn’t worked me well.

Raghu

[Paulie_D]

Use Jquery scrollTop or something similar to toggle a class (or CSS change).

There are plenty of examples available with a quick google.

http://api.jquery.com/scrolltop/

I have an example floating around….

http://codepen.io/Paulie-D/pen/oCdFp/

[Author]

Posts