Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Matthew Sweet
Matthew Sweet
2,083 Points

Fixed header with scrolling/disappearing content

So I am working on personal project for practice and am trying to get the header so that at first it stays above the content at the top but as you begin to scroll the content disappears behind the header as it stays stuck to the top of the window. I'm not sure what I am missing or doing wrong but would greatly appreciate any help!

http://jsfiddle.net/W3A6F/1/

Thanks!

Edit: A little more clarification. My content is currently beginning behind the header not starting directly below it. How do I push the content down so that the first main body content starts directly below the header but I still get the disappear effect once I start scrolling?

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

So what is your question? I don't get it.

Matthew Sweet
Matthew Sweet
2,083 Points

Sorry about that. Edit made.

1 Answer

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

I think of the easy way is to make your #content { margin-top: 140px; }

If you still need help, you can let me know