Databases
StackOverflow2013
Postsdbo
POFixed position element pushed out of relative position element?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFixed position element pushed out of relative position element?
    primarykey
    data
    text
    <p>So i have the following HTML markup;</p> <pre><code>&lt;div id ="page_shadow"&gt; &lt;div id="blog_content"&gt; &lt;div id="main_content_container&gt; Main Content &lt;/div&gt; &lt;div id="swrapper"&gt; &lt;div id="blog_sidebar"&gt; Sidebar Content &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The following CSS;</p> <pre><code> #blog_sidebar.fixed { position: fixed; top: 0; } #swrapper { position:absolute; right:0; } #blog_sidebar { width: 330px; padding:10px; padding-top:25px; height:auto; } #main_content_container { width:600px; float:left; height:auto; padding-bottom:15px; } #blog_content { position:relative; width:960px; margin-left:auto; margin-right:auto; min-height:1300px; height:auto; background:#FFFFFF; z-index:5; } #page_shadow { background:url('../images/background_shadow.png') top center no-repeat; padding:10px; margin-top:-60px; } </code></pre> <p>The following javascript;</p> <pre><code> &lt;script&gt; $(document).ready(function(){ var top = $('#blog_sidebar').offset().top - parseFloat($('#blog_sidebar').css('marginTop').replace(/auto/, 0)); var bottom = $('#blog_content').position().top+$('#blog_content').outerHeight(true) - $('#blog_sidebar').height() - 35; $(window).scroll(function (event) { // what the y position of the scroll is var y = $(this).scrollTop(); // whether that's below the form if (y &gt;= top) { //&amp;&amp; y &lt;= bottom // if so, ad the fixed class $('#blog_sidebar').addClass('fixed'); } else { // otherwise remove it $('#blog_sidebar').removeClass('fixed'); } }); }); &lt;/script&gt; </code></pre> <p>Ok so basically there are two scenarios which occur. IF the page is loaded with the browser viewport above the <code>y</code> position before <code>#blog_sidebar</code>'s position is changed to <code>fixed</code> then the element stays within the blog_content container.</p> <p>HOWEVER, if the page is loaded with if <code>(y &gt;= top) = True</code> resulting in <code>$('#blog_sidebar').addClass('fixed');</code> the element is then pushed outside the blog_content container.</p> <p>Again this only occurs if the viewport is <code>= or below</code> the trigger when the page is loaded.</p> <p>For example if i were to go half way down the page and then click for the page to refresh, the browser loads the page and the element and then jumps to the position it was previously. The fixed position element shown up in the correct position for a split second and then jumps outside <code>#blog_content</code> aligning with the left of the element. </p> <p>Ive got a little example to show the basics of the layout etc, but i dont think i can show exactly whats happening within jsfiddle. <a href="http://jsfiddle.net/ce3V3/" rel="nofollow noreferrer">http://jsfiddle.net/ce3V3/</a></p> <h1>TLDR</h1> <p>Since this is quite confusing. Short version is i am changing a static positioned element with a fixed position element within the DOM, which is resulting in the fixed positioned element being out of place if the window is refreshed and jumps past a certain point. I dont want the fixed position element to jump out of place if a user relaods the page and the window jumps halfway down the page.</p> <p><img src="https://i.stack.imgur.com/hj55L.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDeep
    1. USDeep
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COcan u please explain what you want
      singulars
      1. POFixed position element pushed out of relative position element?
      1. USHushme
    2. COI want the blog_sidebar element to remain within the blog_content element when the page is reloaded with the blog_sidebar class = fixed.
      singulars
      1. POFixed position element pushed out of relative position element?
      1. USDeep
    3. COhttp://jsfiddle.net/hushme/ce3V3/4/ like this
      singulars
      1. POFixed position element pushed out of relative position element?
      1. USHushme
 

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