javascript - 固定位置要素が相対位置要素から押し出されましたか?

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>

わかりましたので、基本的に発生するシナリオは 2 つあります。の位置が に変更されるy前の位置より上のブラウザ ビューポートでページがロードされた場合、要素は blog_content コンテナ内にとどまります。#blog_sidebarfixed

ただし、ページがロードされた場合(y >= top) = True、$('#blog_sidebar').addClass('fixed');その要素は blog_content コンテナの外にプッシュされます。

繰り返しますが、これは、ページが読み込まれたときにビューポートが= or belowトリガーである場合にのみ発生します。

たとえば、ページの途中まで移動してからクリックしてページを更新すると、ブラウザはページと要素をロードしてから、以前の位置にジャンプします。#blog_content固定位置要素が一瞬正しい位置に表示された後、要素の左側に揃えて外側にジャンプします。

レイアウトなどの基本を示す小さな例がありますが、jsfiddle 内で何が起こっているかを正確に示すことができるとは思いません。http://jsfiddle.net/ce3V3/

TLDR

これはかなり紛らわしいので。短いバージョンは、DOM 内の固定位置要素を使用して静的配置要素を変更しているため、ウィンドウが更新されて特定のポイントを超えてジャンプすると、固定位置要素がずれてしまいます。ユーザーがページを再ロードし、ウィンドウがページの途中でジャンプした場合に、固定位置要素が飛び出してはいけません。