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/