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

Question

我在屏幕可见部分的右侧放置了一个侧边栏元素（这部分已经可以工作了！）。侧边栏由几个 DIV 组成。其中一些我不关心，但是当用户向下滚动页面时，最后一个（最低的）不应该“消失”。这就是我被困的地方。在某种程度上，顶部位置不应该是浏览器窗口可见顶部的。这甚至可以用 CSS 和更好的浏览器吗？< 0

这是我对侧边栏的定义：

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

 或 

fixed

。所以，

top:0

 在这种情况下是行不通的。而且，如果您确实将位置更改为其中任何一个，它将以不同的方式表现：

如果它是固定的，元素将相对于窗口定位 如果它是相对的或绝对的，它将是从

zero pixels

 中最近元素的顶部开始的位置 

DOM

，其位置不同于 

static

.

如果

#navsoc

 上面的元素的内容具有灵活的高度，你不能让它尊重它的位置，同时不在滚动上移动。
你需要 Javascript 来实现它。

第一部分有点跑题回来我觉得知道就好！

这里有

小提琴。

Answer 3

我偶然发现了这个线程，因为我不知道要为这种行为使用什么搜索词。

从十年前开始，网络技术似乎有了进步😲，我们现在有

position: sticky

.sticky-to-top {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
}