Question

我已经在屏幕的可见部分的右侧放置了侧边栏元素（此部分已经可以使用！）。侧边栏包含几个DIV。其中一些我不关心，但当用户向下滚动页面时，最后一个（最低的）不应该“消失”。这就是我被困住的地方。在某种程度上，顶部位置应该不是＆lt; 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。

Answer 2

如果您在CSS中使用top，则应确保元素的position不是static（默认），而是absolute，relative或{{ 1}}。因此，fixed在这种情况下不起作用。如果您确实将位置更改为其中任何一个，它将以不同的方式运行：

如果它被修复，则元素将相对于窗口位置如果它是相对的或绝对的，那么top:0位于zero pixels中距离DOM的位置不同的最靠近元素的顶部{/ 1}}。

如果static以上元素的内容具有灵活的高度，则无法使其尊重它的位置，同时不能在滚动上移动。你需要Javascript才能实现这一目标。

第一部分有点偏离主题我觉得很高兴知道它！

这里有fiddle。

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

2 个答案: