保持控制始终可见

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

一个例子就是新的Google搜索页面,当您输入时,它会自动对结果进行定位。在右侧,有一张地图从页面顶部开始,大约为100px。 当您向下滚动时,地图仍保留在视图中,但距页面顶部0px。 当您向后滚动时,它将返回到其正常位置,距离页面顶部100px。

任何想法如何做到这一点?


您正在寻找position: fixed

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

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


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

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

请注意,取决于jQuery。 如果你正在寻找一个不需要jQuery的解决方案,你可以很容易地重写脚本,但是你必须使用浏览器开关,因为IE使用不同的API作为滚动状态而不是其他浏览器。 另外请注意,IE 6不支持position:fixed,所以如果你想支持它,你必须用javascript来模拟它(这是一件容易的事)


使用fixed值的CSS position ,然后使用leftrighttop和/或bottom将其放置在页面上。 例如:

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

你提到的确切例子也需要一些JavaScript。

链接地址: http://www.djcxy.com/p/83837.html

上一篇: Keep control always visible

下一篇: Detect user scroll down or scroll up in jQuery