固定位置元素被推出相对位置元素？

Question

所以我有以下HTML标记;

<div id ="page_shadow">
<div id="blog_content">
     <div id="main_content_container>

       Main Content

     </div>

     <div id="swrapper">
        <div id="blog_sidebar">
          Sidebar Content
        </div>
     </div>
</div>
</div>

以下CSS;

    #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;
}

以下javascript;

            <script>
        $(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 >= top) { //&& y <= bottom 
              // if so, ad the fixed class
              $('#blog_sidebar').addClass('fixed');
            } else {
              // otherwise remove it
              $('#blog_sidebar').removeClass('fixed');
            }
          });
        });
        </script>

好的，基本上有两种情况会发生。如果在y的位置更改为#blog_sidebar之前，页面加载了fixed位置上方的浏览器视口，则该元素将保留在blog_content容器中。

但是，如果页面加载了(y >= top) = True，导致$('#blog_sidebar').addClass('fixed');该元素被推送到blog_content容器之外。

同样，只有在加载页面时视口为= or below触发器时才会出现这种情况。

例如，如果我要走到页面的一半然后单击要刷新的页面，浏览器会加载页面和元素，然后跳转到之前的位置。固定位置元素在正确的位置显示一瞬间，然后跳到#blog_content之外，与元素的左边对齐。

我有一个小例子来展示布局的基本知识等，但我不认为我可以显示jsfiddle中发生的确切内容。 http://jsfiddle.net/ce3V3/

TLDR

因为这很令人困惑。简短的版本是我正在更改DOM中具有固定位置元素的静态定位元素，如果窗口被刷新并跳过某个点，则导致固定定位元素不在适当位置。如果用户重新登记页面并且窗口在页面中间跳跃，我不希望固定位置元素跳出位置。