保持控件始终可见

Question

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

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

有关如何完成的任何想法？

Answer 1

您在除IE6的所有浏览器寻找position: fixed

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

作品。

Answer 2

position:fixed是去这里的路。如果你想在google页面上实现所描述的效果，你需要一个小小的javascript来切换元素的CSS样式，具体取决于滚动位置。

你可以找到该任务在这里的脚本： http://jsfiddle.net/6bnuU/

需要注意的是依赖于jQuery的。如果你正在寻找一个不需要jQuery的解决方案，你可以很容易地重写脚本，但是你必须使用浏览器开关，因为IE使用不同的API作为滚动状态而不是其他浏览器。 还要注意的是IE 6不支持位置：固定的，所以如果你想支持它，你将不得不使用JavaScript来模拟它（这是一件容易的事）

Answer 3

使用CSS position与价值fixed，那么位置它在页面上用left,right,top和/或bottom。例如：

#some_element { 
    position: fixed; 
    top: 100px; 
    right: 0; 
} 

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