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'”更改为各种值，但这只会使情况变得更糟。

在我看来，“ re-anchors” RightSide的jQuery直到我滚动了一百个像素左右才被调用，然后突然将div向下移动并将其保持在正确的位置。

简介：即使用户拖动垂直滚动条（滚动），我也不希望RightSide上下移动。

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

Answer 1

如何将这两个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/