Toolbar wont stay in place when scrolling horizontally

I'm trying to create a toolbar similar to the twitter one. problem is when the browser is not wide enough and i scroll to the side the toolbar follows instead of staying put horizontally so that scrolling left does not show the hidden part of the toolbar.

How do i get the effect i want?

My CSS:

.toolbar {
    visibility: visible;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 22px;
    background: black;
    color: white;
    padding: 2px;
    text-align: left;
    font-size: 1.1em;
    border-bottom: 3px ridge #dddddd开发者_运维问答;
}

example: http://t2.technion.ac.il/~snayish/m/toolbar.html

css: http://t2.technion.ac.il/~snayish/m/style.css

on twitter its done with JS you cant solve this with pure CSS.

I would solve it like this: http://jsfiddle.net/Tt3rw/1/

(getting the scrollLeft position and moving the left position of the content part of your banner according to this)