Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Play Store Header (Android)

How do I create a header (Like the Play Store on Android) that fades in as I scroll down on my website?

2 Answers

Hi Deon,

I you looking to do this on a webpage/ website or on an ios/andriod app ??

Also are you familiar with JQuery ?

I think I know what knid of menu you you are talking about its similar to that of Twitter where when you scroll down the nav becomes fixed to the top of the page and the content scrolls underneath is this correct?

Craig

I'm not familiar with JQuery... The header is invisible until you scroll down the page. As you start to scroll the header fades in from 0%-100% opacity and then stays there. When scrolling back to the top it fades out again in the same fashion.

No Problem,

This would require some JavaScript or jQuery to achieve in the best possible way having it fade in a good manor.

Here are the treehouse courses on JavaScript and jQuery

Standard HTML and CSS wont be best to this and the above have fields designed to manipulate front end on user interaction like scrolling.

Hope this helps !

Craig