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

JavaScript

Posted by Matthew Smart
Matthew Smart
12,567 Points

Show elements when the page has scrolled down to specific point???

Lets say I had a website that had hidden content, and when a user scrolls down they appear.

For example:

i have 5 sections. each section roughly fills up a screen, when the user scrolls down to the second section all of the content in that section appears. And so on for the other sections

4 Answers

Geoff Parsons
Geoff Parsons
11,679 Points
Geoff Parsons
Geoff Parsons
11,679 Points

As Jenny pointed out you can always implement something yourself in jQuery using the scroll event and scrollTop. There are also a few libraries out there that will help out a little too. You may want to check out jQuery Waypoints.

Jenny Swift
Jenny Swift
21,999 Points
Jenny Swift
Jenny Swift
21,999 Points

I haven't tried it myself, but I think jQuery's .scroll() would do this. http://api.jquery.com/scroll/

Andrew Rickards
Andrew Rickards
18,877 Points
Andrew Rickards
Andrew Rickards
18,877 Points

jQuery's offset() (http://api.jquery.com/offset/) might be helpful as well... possibly.

I was trying to do something similar recently but just ended up using this jQuery plugin. https://github.com/bigspotteddog/ScrollToFixed.

It's not exactly what you are looking for but it could theoretically be used for what you want. All it does is add a class to the element when it reaches the top of the screen. You could just use css opacity or appearance or something instead of position: fixed.

Hope that helps. :)

Jenny Swift
Jenny Swift
21,999 Points
Jenny Swift
Jenny Swift
21,999 Points

also, these look pretty good:
http://johnpolacek.github.io/scrollorama/
http://janpaepke.github.io/ScrollMagic/