CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
alchuang
alchuang

Reputation: 3571

Floating Header with Zoom to Top like theverge.com

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?

Upvotes: 1

Views: 694

Answers (1)

algorhythm
algorhythm

Reputation: 8728

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

Upvotes: 2

Related Questions