javascript - 始终将容器定位在顶部

Question

我有一个插件，我在其中提供了一个简单的 div 容器，该插件通过 javascript 在容器内创建各种 dom 元素。插件创建的基本结构是这样的:

Wrapper Div (Position:Relative)
   - Left Container (Position: Absolute)
        - Left Top sub-container (Position: Absolute)
   - Right Container (Position: Relative)
        - Right Top sub-container (Position: Absolute)
        - Right Sub-Container frame with absolute items (Position: Relative)

这是我为插件创建的完全相同的结构创建的 fiddle : http://jsfiddle.net/FsYt8/

我这里面临的问题是当内容溢出时，可以用鼠标滚轮滚动内容(如fiddle)。但是，当我向下滚动时，我希望 fiddle 中的上述两个左上角和右上角子容器(红色/蓝色条)颜色本身保持在顶部，而不是随着内容向下滚动。

该插件在 container-right-frame div 中创建 dom 元素并将元素定位为绝对位置(然后根据 container-right 的顶部/左侧定位) .如何实现上述两个栏的固定类型定位？

Answer 1

固定 header 并相应地定位它们:

http://jsfiddle.net/QYCra/

将列的初始高度向下移动，使其从标题下方开始:

.frame {width:924px;height:300px;position:relative;overflow-x:hidden;}
.axis-left {width:303px;height:34px;position:fixed; top:0; background-color:blue;z-index:2;}
.axis-right {width:615px;height:34px;position:fixed; top:0; left:310px; background-color:red;z-index:2;}
.container-left {height:340px;width:303px;top:30px; left:0px;position:absolute;background-color:green;z-index:1;overflow:hidden;}
.container-right {height:340px;width:615px;top:30px; left:304px;position:relative;overflow:hidden;background-color:yellow;z-index:1;}