I'm looking for a way to do an effect which is most likely a bination of things, the base of it would be something like this: / As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?

I've seen the post: How to make div scroll down with a page once it reaches top of page? and I know of sticky elements /

Is it even possible to do something like this? If yes, can you give me links/examples please? And of course I need to make it super super smooth like the Nike one...ha

Here is a jsfiddle, but I can't get it to work right. /

Thanks.

I'm looking for a way to do an effect which is most likely a bination of things, the base of it would be something like this: http://nikestadiums./ As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?

I've seen the post: How to make div scroll down with a page once it reaches top of page? and I know of sticky elements http://imakewebthings.github./jquery-waypoints/sticky-elements/

Is it even possible to do something like this? If yes, can you give me links/examples please? And of course I need to make it super super smooth like the Nike one...ha

Here is a jsfiddle, but I can't get it to work right. http://jsfiddle/3U2Gj/65/

Thanks.

• javascript
• jquery
• sticky

• 1 Do you really need the animation effect ? – soju Commented Mar 5, 2012 at 15:57

1 Answer 1

I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.

http://jsfiddle/t0nyh0/aMXRq/3/

I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.

Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery./UI/Effects/ClassTransitions.

In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:

.minState3.expand {  }

and to show the button again

.minState3.expand button { display:block; }

Doing it this way allows you the flexibility to define how it looks based on the different states.