Take the 2-minute tour ×

Just getting into the whole "parallax scrolling" phenomenon and have more of a general use-case and implementation question.

On sites like http://www.ianlunn.co.uk/plugins/jquery-parallax/ and http://www.zensorium.com/tinke/ the element that seems to have the "parallax" effect is a background image. Is this how parallax scrolling works (or to be clearer, the only way it works)?

On a site I am developing, I'm trying to apply the same sort of effect to each section-header (large text with the red line underneath it) to start behind the content that follows beneath it (2 column on the first, sponsor area on the second) and then on-scroll, appear above the content. I was thinking parallax scrolling would be what I'd want to reveal the content in a fluid fashion. I've also looked into Scrolling Parallax thinking that may be the way to go, but am more after a direction I go to as I'm not sure if I'm approaching this correctly. Any thoughts would be greatly appreciated. Thanks!

share|improve this question
By using the scrollTop property (the distance scrolled) and javascript you can move anything anywhere on scroll, so there really are no limitations to where or how you're page moves when scrolled, and the same goes for any element on the page. –  adeneo Nov 8 '12 at 16:08
@adeneo Thanks for the response. Maybe I don't need jQuery Parallax for this after-all. So it's a matter of "spying" on the browser when it reaches a certain div (in this case) and then running an animate() function on that? Have any examples? –  Zach Nov 8 '12 at 16:29
Here's a fiddle, it atleast shows how to move stuff based on the scrolled distance etc. –  adeneo Nov 8 '12 at 16:36
Thanks for that -- one last piece and I think I can go off on my own for the moment - how would I specify a starting scroll position (as far as -- don't count the scroll until you reach this element) if I wanted the positioning to not take effect until let's say 200px above the element moving? –  Zach Nov 8 '12 at 17:18
Just check the scrolltop, like if ($('body, html').scrollTop() > 200) //do stuff, and then if you need it to be 200px above some element you can use $(element).offset().top - 200 etc –  adeneo Nov 8 '12 at 17:31
show 1 more comment

Your Answer



Browse other questions tagged or ask your own question.