div上有条件的'static'到'fixed'导致滚动抖动

Question

我有一个顶部导航栏，其位置为“静态”，但是当用户滚动超过导航栏的高度时，位置会变为“固定”，以便导航栏附加到窗口的顶部。当滚动回到页面顶部时，它也会切换回“静态”。

导航栏有一个静态横幅div，它保留在页面顶部。当窗口顶部滚动到导航栏下方时，它将变为“fixed”。

当页面刚刚足够长以至于需要滚动时，我一直在经历一些抖动，但还不足以将滚动高度和导航栏保持为“固定”，因此当滚动到页面底部时，导航酒吧在“静态”和“固定”之间感到紧张。

我已经发布了如何设置它的jsfiddle，但在我遇到问题时无法复制问题：http://jsfiddle.net/bB7Bf/

HTML：

<div id="topMaterial">Static Top doesn't move</div>
<div id="ktNavbar">topbar that sticks to top of window after scrolls below static height</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JS：

$(function() {
var navScroll = $(window).scroll(function() {

    var scrollPosition = $(this).scrollTop();

    if (scrollPosition > 120) $("#ktNavbar").css({
        "position": "fixed",
        "top": 0,
        "left": 0,
        "right": 0
    });

    else $("#ktNavbar").css("position", "static");
    });
});​

是否有一种解决方法可以防止“静态”和“固定”之间的滚动条件抖动？

Answer 1

为什么不在整个时间内保持固定并在下面的任何内容上添加上边距？没必要。