Grow your CSS skills. Land your dream job.

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

  • # October 30, 2009 at 2:51 pm

    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!

    # October 30, 2009 at 3:51 pm

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

    # October 30, 2009 at 3:55 pm

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

    # October 30, 2009 at 7:11 pm

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

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

    # October 31, 2009 at 4:33 pm

    Excellent! thanks!!

    # February 23, 2012 at 3:24 am

    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 .

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".