Question

If you have a look at digg.com, there is a persistent status bar (i.e. the Digg version number etc).

I have played with a few jQuery plugins, but they don’t anchor fully to the bottom like that one in Digg.. I have tried to look at the CSS, but can’t quite understand what bits are needed..

Any ideas/pointers very welcome?

<— EDIT: SOLUTION —>

Thanks to the answer/comments below, I have ended up with the follow (just in case anyone else wants a basic working version to get going..):

The CSS is:

.footer-bar {
            background: -webkit-gradient(linear,left top,left bottom,from(#F3F3F3),to(white));
            background: -moz-linear-gradient(top,#F3F3F3,white);
            background-color: white;
            border-top: 1px solid #AAA;
            bottom: 0;
            color: #333;
            font-size: .833333333333em;
            font-family: Arial Narrow;
            height: 12px;
            padding: 5px 0;
            position: fixed;
            right: 0;
            text-align: left;
            width: 100%;
            z-index: 5;
        }

Obviously you can change the relevant bits, and then of course in my case I just have the following HTML:

<span class="footer-bar">Some text in the footer/status bar that stays there even when you scroll</span>

So there you are – thanks to all the others and of course the guys who originally created it.. CSS is still a bit of a mystery in some cases to me!

Answer 1

You want position: fixed on the element. No JavaScript.

Fixed positioning makes the element relevant to the viewport.