Fading Header as you scroll down

[hayeske]

I need help getting my header to work like it does on this site:

http://www.thedailybeast.com/newsweek.html

I have a scrolling parallax site and I want the header to fade away as you scroll through the first section to allow more screen for the site itself but I want the header to appear when you mouse over it.

I hope this makes sense and someone can help me!

[SilverSerpent]

You can try this out: http://cdpn.io/GibAh

Basically it checks if the site has been scrolled more than 50px, and if so it gives the header a class that sets the opacity to 0, and on hover the class sets the opacity to 1. Just adjust the height of the header and the top margin of any elements on the page to make them line up (fixed positioning is slightly annoying). Also, one consideration to take into account is that phones and tablets do not have a hover state, so you may want to include an alternative way of handling this for those devices.

[vipin10agarwal]

SilverSerpent best reply dear

[hayeske]

Thanks for the reply. Is there an easy way to do this with just CSS? I’m using a WordPress template and I’m not sure where to add this JQuery Script. Do I just add in the functions.php?

[Author]

Posts