固定位置窗口滚动问题

Question

所以我有一个页面布局，它有一个相对位置的主要内容容器 div。在这个容器中，我还有另外两个布局 div，一个用作侧边栏，另一个用作可以上下滚动的内容容器。此 div 也有一个标题栏，当您滚动浏览此 div 时，该标题栏必须保持在原位。如果我修复标题栏的位置，只要您在该容器中滚动，它就会保持原位而不会出现问题。如果您滚动整个窗口（在包装器 div 之外），标题栏也会随之滚动。我知道为什么会发生这种情况，但想知道是否有办法解决它或防止这种行为。我也不介意使用 Javascript 来做到这一点。我知道固定定位只会使元素固定到其父容器。

这很可能很难理解，至少通过文本布局明智，所以这里是一个非常简单的示例，只是一些标记，显示哪些项目是固定的以及它们是如何布局的。 http://jsfiddle.net/gvNqv/

非常感谢您对此提供的任何帮助！

编辑：在此处从小提琴添加代码

.maincontent{ 
    position:relative; 
    width:760px;
}
.sidebar{
    float:left;
}
.stage{
    float:right;
    position:relative;
}
.headbar{
    position:fixed;
}

​

<div class="wrapper">
   <div class="mainContent">

      <div class="sideBar"></div>

      <div class="stage">
         <div class="headbar">banner text</div>        
      </div>

   </div>
</div>​

enter code here

Answer 1

您不需要使用 top、left、bottom 或 right 来固定某物吗？