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？像这样的东西？

<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/

jquery固定div同时滚动弹跳

1 个答案: