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

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?

我在屏幕可见部分的右边放置了一个侧栏元素(这个部分已经工作了!)侧边栏由几个div组成。其中的一些我并不关心，但是最后一个(最低的)在用户滚动页面时不应该“消失”。这就是我被困住的地方。在某种程度上，顶部位置不应该小于浏览器窗口可见顶部的< 0。有了CSS和更好的浏览器，这是可能的吗?

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.

第二个元素“navsoc”应该保持在可见部分。但是它的移动完全像“navtop”和我在那里定义的其他东西。

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

2 个解决方案

#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/

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

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

此外，如果您想设置!对于值来说很重要，请使用top:0!重要的不是:!重要的0。

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

当你有0px你不需要写单位，你可以用0。

#2

if you use top in CSS you should make sure that the element's position is not static (default) but absolute, relative or fixed. So, top:0 in this case is not working. And if you do change the position to either of those it would behave in different ways:

如果您在CSS中使用top，您应该确保元素的位置不是静态的(默认)，而是绝对的、相对的或固定的。所以，在这个例子中，0是无效的。如果你把位置改变到这两个位置中的任何一个它的行为方式都会不同:

if it's fixed the element would be position relative to the window if it's relative or absolute it would be position zero pixels from the top of the closest element in the DOM with a position different than static.

如果它是固定的，那么元素相对于窗口的位置相对于窗口的位置相对于窗口的位置相对于窗口的位置相对于窗口的位置相对于DOM中最接近的元素的顶部的位置为0像素，位置不同于静态。

If the contents of the element above #navsoc has a flexible height you can't make it respect it's position and at the same time not move on scroll. You need Javascript to achieve that.

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

The first part is a bit off topic back I think it is good to know it!

第一部分有点离题了，我觉得知道这个很好!

Here you have the fiddle.

这是小提琴。

#1