jquery在滚动反弹时修复了div

Question

我的网页最右侧有一个 div (RightSide)，它位于另一个 div (TopBanner) 的下方。即使用户向下滚动，TopBanner div 也会保持其在屏幕顶部的准确位置。正是我想要的。但我也希望 RightSide div（在 TopBanner 下方）即使在用户向下滚动时也能保持在原位。

我已经达到了大约 80%，但它的行为很奇怪。当您开始向下滚动时，RightSide 开始向上移动页面，直到它开始被 TopBanner 遮挡（在它后面），然后它突然弹回到它的固定位置，并在剩余的滚动过程中停留在那里。这是执行“弹回”的 jquery：

var stickerTop = parseInt($('#RightSide').offset().top);
        $(window).scroll(function () {
            $("#RightSide").css((parseInt($(window).scrollTop()) + parseInt($("#RightSide").css('margin-top')) > stickerTop) ? {
                position: 'fixed',
                top: '0px'
            } : {
                position: 'relative'
            });
        });

RightSide 的初始行为是在页面向上移动大约 100 像素，然后才弹回到正确的位置，这让我的老板和我们的用户发疯了。我已经尝试将“top：'0px'”更改为各种值，但这只会让事情变得更糟。

在我看来，“重新锚定”RightSide 的 jquery 直到我滚动了一百个像素左右才会被调用，然后它突然将 div 向下移动并在之后将其保持在正确的位置.

总结：我从不希望 RightSide 向上或向下移动，即使用户正在拖动垂直滚动条（滚动）。

如何做到这一点？ （我真的不想为此使用 iframe。）谢谢。

Answer 1

将这两个 div 打包成一个位置固定的 div 怎么样？像这样？

<div id="StickToTop">
  <div id="TopBanner">
  ...
  </div>
  ...
  <div id="RightSide">
  ...
  </div>
</div>

还有 CSS：

#StickToTop {
  position: fixed;
  top: 0px;
}
#TopBanner {
  float: left;
  ...
}
#RightSide {
  float: right;
  ...
}

快速预览：http://jsfiddle.net/k5xH4/3/