javascript - 相対親内に絶対 div を配置する - Webkit ブラウザー

Question

私のHTMLは基本的に次のようになります。

<div id="#container">
  <div id="left_col">
    left stuff
  </div>
  <div id="middle_col">
    middle stuff
  </div>
  <div id="right_col">
     <div id="anchor"></div>
     <div id="floater>
       The problem div
     </div>
  </div>
</div>

一番右の列をセンタリングの一部として使用したくないため、コンテナー div は左に 82px プッシュされます (上に、left_col と middle_col のサイズのヘッダー ナビゲーション バーがあります)。

#container {
    width: 1124px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    color: #656f79;
    position: relative;
    left: 82px;
}

#left_col {
    float:left;
    width: 410px;
    background-color: #fff;
    padding-bottom: 10px;
}

#middle_col {
    width: 545px;
    float: left;
}

#right_col {
    float: left;
    width: 154px;
    margin-left: 5px;
    position:relative;
}

#floater {
    width: 154px;
}

ページを下にスクロールするときに #floater div を所定の位置に保つために、次の JavaScript を使用しています。

var a = function() {
    var b = $(window).scrollTop();
    var d = $("#anchor").offset().top;
    var c = $("#floater");
    if (b > d) {
        c.css({position:"fixed",top:"10px"});
    } else {
        c.css({position:"absolute",top:""});
    }
};
$(window).scroll(a);
a();

私が抱えている問題は、WebKit ベースのブラウザーで、jQuery がフローター div の位置を修正すると、上から 10 ピクセルにとどまると、#container からの「左: 82px」がウィンドウから出て、#floater が 82 ピクセルジャンプすることです。左の方です。これは FF や IE では発生しません。誰もこれに対する解決策を知っていますか?

更新: 解決済み

この問題は、固定配置ではなく絶対配置を使用して解決しました。div#anchor の上部オフセットが $(window).scrollTop() より大きい場合、値 $(window).scrollTop() に基づいて div#floater の上部 CSS プロパティを設定するように JavaScript を変更しました。ものすごく単純。

したがって、a() 関数は次のようになります。

var a = function() {
    var b = $(window).scrollTop();
    var d = $("#anchor").offset().top;
    var c = $("#floater");
    if (b > d) {
        var t = b-200; //200px is the height of the header, I subtract to make it float near the top
        c.css({top:t+"px"});
    } else {
        c.css({top:""});
    }
};