javascript - 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 的初始行为将页面向上移动了一百个像素左右，然后才弹回到正确的位置，这让我的老板和我们的用户抓狂。我尝试过将“top: '0px'”更改为各种值，但这只会让事情变得更糟。

在我看来，“重新锚定”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/