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! While you're at it, check out some resources Treehouse students have shared here.
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
Jeff Lemay
14,268 PointsHow 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
Philipp Antar
7,216 Pointsthis 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
14,268 PointsThank you for the help Philipp, much appreciated!
Drew Butcher
33,160 PointsCan this be accomplished without javascript?