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.

General Discussion

Jeff Lemay
Jeff Lemay
14,266 Points

How do you make a div be fixed at the top only after scrolling to a certain point?

I've seen a few sites recently where, after scrolling down the page a bit, a section will reach the top of the page and then stay fixed at the top so you can always see it as you continue scrolling down.

One example is the Yahoo! homepage; there's a purple section with News categories (All Stories | News | Local | etc.). It sits like 400px down the page, but when you scroll down to it, it becomes fixed at the top as you continue scrolling past.

I'd like to implement this in something I'm working on, but I don't know what's being used. I can see that the CSS changes once the item becomes a fixed section, but how does the CSS recognize that you've scrolled that far?

PS: Treehouse is awesome, couldn't be happier with the service.

3 Answers

this question on Stack Overflow could help

Basically, you detect the scrolled distance using the jQuery function scrollTop(). Then you can use another jQuery function to alter the CSS

Jeff Lemay
Jeff Lemay
14,266 Points

Thank you for the help Philipp, much appreciated!

Drew Butcher
Drew Butcher
33,160 Points

Can this be accomplished without javascript?