Grow your CSS skills. Land your dream job.

Need to float and slide box containing products

  • # November 22, 2012 at 5:33 pm

    Small micro site build for a friend.

    On order page, I want the product box to stay in one position as the user scrolls down the order form.

    Building this out on 960gs, using same for the first time

    Can’t seem yet to find a way to do this successfully in anything but chrome.

    Site layout: http://centervilleelksapparel.com

    Order page playground: http://centervilleelksapparel.com/new-order.php

    Ideally I’d like to keep the blue box from scrolling out of view.

    Anyone care to point me toward the light?

    Thanks and happy thanksgiving

    Michael

    # November 22, 2012 at 6:19 pm

    You should be able to do it with position: fixed.
    Have you tried that?

    # November 23, 2012 at 5:15 am

    [found this little plugin](http://www.profilepicture.co.uk/demos/stickybox/multi.php “found this”) if you are ok with jQuery

    # November 23, 2012 at 5:21 am

    I think position fixed is what you need:

    http://jsfiddle.net/jonigiuro/SrHcU/

    # November 27, 2012 at 4:01 pm

    jQuery is not the way to go for this, position:fixed is definitely the code for the job

    # November 27, 2012 at 4:37 pm

    Although still a work in progress as I’m waiting on content (what’s new, right?), I think I’ve settled this issue of the floating menu of products.

    [Centerville Elks Apparel](http://centervilleelksapparel.com)

    # November 27, 2012 at 4:44 pm

    And I forgot, thanks to all that helped light the way.

    It was solved by “position: fixed;” and an additional div class to get around the 960 issue.

    Thanks and greetings once again from Southwest Ohio. ;)

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

You must be logged in to reply to this topic.

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