将元素保持在窗口的可见部分内

Question

我已经在屏幕的可见部分的右侧放置了侧边栏元素(此部分已经可以使用!).侧边栏包含几个DIV.其中一些我不关心,但当用户向下滚动页面时,最后一个(最低的)不应该"消失".这就是我被困住的地方.在某种程度上,顶部位置不应该是浏览器窗口可见顶部的<0.这对CSS和更好的浏览器来说甚至可能吗？

这是我对侧边栏的定义:

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

这是我想要保留在屏幕可见部分内的元素:

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;}

第二个元素"navsoc"应保留在可见部分.但它的移动方式与"navtop"和我在那里定义的其他内容完全相同.

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

Answer 1

我想你需要

position:fixed;

因此元素将相对于窗口定位,因此如果滚动它将始终可见.

演示:http://jsfiddle.net/mJubt/

此外,如果要设置!important值,请使用top:0!important而不是top:!important 0.

如果你0px没有必要编写单位,你可以使用0.