保持控制始终可见

Question

我想知道当用户在页面上下滚动时是否有人知道如何保持图像/控件始终可见。

新的Google搜索页面上有一个示例，它会在您输入时自动取消您的搜索结果。在右侧，有一张地图从页面顶部以100px的速度开始。向下滚动时，地图仍保留在视图中，但距离页面顶部为0px。向上滚动时，它会返回到正常位置，距离页面顶部100px。

关于如何做到的任何想法？

Answer 1

您正在寻找position: fixed

<div style="position: fixed; right: 100px; top: 100px; width: 200px; height: 100px; background-color: red">
 I'm fixed</div>

适用于IE6以外的所有浏览器。

Answer 2

position:fixed是去这里的方式。如果你想在google页面上实现所描述的效果，你需要一个小的javascript来根据滚动位置切换元素的css样式。

您可以在此处找到该任务的脚本： http://jsfiddle.net/6bnuU/

请注意，这取决于jquery。如果您正在寻找不需要jquery的解决方案，您可以轻松地重写脚本，但是您必须使用浏览器开关，因为IE使用不同的API来滚动状态而不是其他浏览器。 另请注意，IE 6不支持position：fixed，所以如果你想支持它，你必须用javascript来模拟它（这是一个简单的任务）

Answer 3

使用值为position的CSS fixed，然后将其放在包含left，right，top和/或{{1}的网页上}。例如：

bottom

您提到的确切示例也需要一些JavaScript。