0

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!

2
  • 2
    +1 Alex. This is exactly what Digg is doing for that bar too. Load up Chrome/Safari, right click the bar, inspect element. Click the style 'position: fixed', to disable it, and watch the bar vanish, or anchor itself, to the bottom of the page.
    – Justin
    Jul 1, 2011 at 3:15
  • Thanks Justin.. I was looking around in chrome dev tools - I didn't even realise that you could un-tick a style!
    – Dav.id
    Jul 1, 2011 at 4:45

1 Answer 1

3

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

Fixed positioning makes the element relevant to the viewport.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.