Floating Header with Zoom to Top like theverge.com

Question

I am really fond of the floating header at theverge.com. When you scroll down, the header stays fixed on top and when you scroll down to a certain point, The Verge logo appears which allows you to zoom back up.

How do I reproduce a similar header, can it be done with just HTML and CSS?

Answer 1

try this with CSS

.fixedHeader {
    position:fixed;
    top: 0;
}

the small button you should build with jQuery. therefore you have to check the property scrollTop to know when the button should be shown. and if you click the button you should .animate() the scrollTop-property with jQuery back to zero (0).

DEMO

And here with small button and click-event:

DEMO