固定位置窗口滾動問題

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

您是否不需要使用頂部，左側，底部或右側將其固定在某個物體上？