Databases
StackOverflow2013
Postsdbo
POFixed Position window scrolling issue
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFixed Position window scrolling issue
    primarykey
    data
    text
    <p>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. </p> <p>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. <a href="http://jsfiddle.net/gvNqv/" rel="nofollow">http://jsfiddle.net/gvNqv/</a> </p> <p>Thanks a bunch for any possible help with this! </p> <p>EDIT: Adding code from fiddle here</p> <pre><code>.maincontent{ position:relative; width:760px; } .sidebar{ float:left; } .stage{ float:right; position:relative; } .headbar{ position:fixed; } </code></pre> <p>​</p> <pre><code>&lt;div class="wrapper"&gt; &lt;div class="mainContent"&gt; &lt;div class="sideBar"&gt;&lt;/div&gt; &lt;div class="stage"&gt; &lt;div class="headbar"&gt;banner text&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;​ enter code here </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USStavros_S
    1. USStavros_S
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYou should put the code in the question as well. It would be more helpful if your [fiddle](http://jsfiddle.net/gvNqv/) had the necessary styling in it to replicate the issue.
      singulars
      1. POFixed Position window scrolling issue
      1. UStw16
    2. COYea its really hard for me to replicate the actual layout itself since its in a .net MVC environment. It also is configurable to be both a Facebook app as well as a stand alone application. I unfortunately inherited a bunch of views with spaghetti code laced in them.
      singulars
      1. POFixed Position window scrolling issue
      1. USStavros_S
    3. COSurely you can replicate the issue by just adding in some lorem ipsum (dummy text), heights and background colours to make it clear what is going on? It will be much easier for people to help you.
      singulars
      1. POFixed Position window scrolling issue
      1. UStw16
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload