固定位置窗口滚动问题

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

您是否不需要使用顶部，左侧，底部或右侧将其固定在某个物体上？