How do I create breadcrumbs like in this Apple site ?

Question

I've seen this page here and I really like the breadcrumbs at the bottom. How do I achieve this behavior ? The breadcrumbs at the bottom stays at the bottom and nomatter if you're scrolling down, it is still there.

http://developer.apple.com/iphone/library/navigation/index.html?section=Resource+Types&topic=Getting+Started

Please someone help me with some good code. Because I have no clue.

Answer 1

#breadcrumbs {    
    position: fixed;
    bottom: 0px;
    width: 100%;

    /* Set your desired height
     * and other factors like you would
     * any other div.
     */
}

position: fixed fixes your element to an edge of the viewer, in this case, to the bottom. If you want to fix the element to the top, you would go top:0px, or left side 30px from the bottom, you'd go left:0px;bottom:30px. I use this a lot for my CMS admin pages (I put nav bars and logout at the top). It's a great tool, but bear in mind that the iPhone does not support native CSS :fixed, nor does older IE.

Answer 2

Did you look into using javascript or a jQuery plugin to make the breadcrumb for you? Then you can use dclowd9901's answer to position it