Keep element inside visible part of window

Question

I have positioned a sidebar element at the right side of the visible part of the screen (this part already works!). The sidebar consists of several DIVs. A few of them I don't care about, but the last (lowest) one should not "disappear" when the user scrolls down the page. And here is where I'm stuck. In a way, the top position should not be < 0 of the visible top of the browser window. Is that even possible with CSS and the better browsers?

Here is my definition of the sidebar:

div#sidebar{font-size:95%; float: right;width: 150px; margin-top:20px;}
div#sidebar div{padding: 5px 0;margin-bottom: 5px}

Here is the element I would like to keep inside the visible part of the screen:

div#navtop{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px;}
div#navsoc{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px; top:!important 0px;}

The second element, "navsoc", should remain in the visible part. But it moves exactly like "navtop" and the others I have defined there.

<div id="sidebar">
<div id="navsoc">
keep me inside the window!
</div>
</div>

Answer 1

I think you need

position:fixed;

So the element will be positioned relatively to the window, so if you scroll it is always visible.

Demo: http://jsfiddle.net/mJubt/

Moreover, if you want to set !important to a value, use top:0!important instead of top:!important 0.

And when you have 0px you don't have to write the unit, you can use just 0.