How to make a floating module, like apple/store/cart

[schedal]

Hi, how can I make a menu/block of CSS float on the page like this:
http://store.apple.com/us/cart

Make your browser very thin, and scroll down, the cart moves with your page. However this is NOT using just position:fixed since the cart "knows" when you are at the top and only starts to scroll after a certain distance is moved, and I see javascript being called. However their code is very mixed like spaghetti; so hard to unravel.

Any ideas? Is this a simple function in an existing JS package?

Thanks!

[blue642]

This article/screencast is what i believe you’re looking for.

[schedal]

sorry there blue, but I dont see any links in your post… thanks! ;)

[blue642]

http://jqueryfordesigners.com/fixed-floating-elements/

oops, I must’ve set it to display:none…. just kidding.

[schedal]

Excellent! thanks!!

[wikijames]

there is a problem in that cart ..
http://jqueryfordesigners.com/fixed-floating-elements/
when you resize the browser , that cart can’t maintain its it standard position ..
see apple cart . it maintain position and you can see it also after resize of browser .

[Author]

Posts