固定位置窗口滚动问题

Question

So I have a page layout that has a main content container div that is position relative. With in this container I have two other layout divs, one acting as a side bar the other acting as a content container that can scroll up and down. This div also has a heading bar that must remain in place when you scroll through this div. If I fix the position the heading bar it will stay in place with out a problem as long as you scroll with in that container. If you scroll the entire window though (outside the wrapper div) the header bar scrolls along with it. I know why this is happening but would like to know if there is a way to fix it or prevent this behavior. I do not mind using Javascript to do so either. I understand that that fixed positioning only makes the element fixed to its parent container.

This is most likely hard to understand at least lay out wise through just text so here is a very simple example fiddle of just some mark up showing which items are fixed and how they are sort of laid out. http://jsfiddle.net/gvNqv/

Thanks a bunch for any possible help with this!

EDIT: Adding code from fiddle here

.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

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