View Full Version : Animation to Top of Page

02-10-2012, 08:31 AM
I am trying to get my #main div to animate over the top of my #header div and then stop at the top of the page. I am trying to avoid setting a predetermined height for the animation. The page it is on uses a fluid layout. Does anyone know how to make the #main div stop animating at the top of the page?


I know that ideally a .slideUp/.slideDown function would be in order, but for some reason it interferes with the fittext plugin I am using. Just FYI

02-10-2012, 07:41 PM
Just to clarify...

you're wanting to get your #main div to move/animate downwards 150px as it increases its opacity from 0 to 1, once it reaches the 150px you want the #main div to stop (either moving or animating).


02-10-2012, 08:00 PM
Sorry I should have been more clear. Basically I want the #main div to move up when the work link is clicked and then stop moving when it hits the top of the page. And then, when the about or contact links are clicked to animate down again to where it was previous. My page is based on % so I would like to keep px and ems out of it. Do you think this is possible?

Does that make sense?

02-10-2012, 08:07 PM
It is possible, the only way that I know of (I'm relatively new to what you're attempting as well) is using HTML5.

I'm unsure exactly how it's done (still researching right now) but here's an example of it in use http://slaveryfootprint.org/.

(click the 'What' button, then start scrolling down)