4

我在屏幕可见部分的右侧放置了一个侧边栏元素（这部分已经工作了！）。侧边栏由几个 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>
4

2 回答 2

8

我想你需要

position:fixed;

所以元素将相对于窗口定位，所以如果你滚动它总是可见的。

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

此外，如果您想设置!important一个值，请使用top:0!important而不是top:!important 0.

当你有0px你不必写单位时，你可以使用 just 0。

于 2012-09-01T19:59:16.847 回答
0

如果你top在 CSS 中使用，你应该确保元素position不是static（默认）而是absolute，relative或者fixed. 所以，top:0在这种情况下是行不通的。如果您确实将位置更改为其中任何一个，它将以不同的方式表现：

如果它是固定的，则元素将是相对于窗口的位置，如果它是相对的或绝对的，它将是zero pixels从最近元素的顶部开始的DOM位置，位置不同于static.

如果上面元素的内容#navsoc有一个灵活的高度，你不能让它尊重它的位置，同时不能在滚动时移动。你需要 Javascript 来实现这一点。

第一部分有点跑题了，我觉得很高兴知道它！

在这里你有小提琴。

于 2012-09-01T20:50:45.980 回答