在div上将条件“static”改为“fixed”会导致滚动抖动

Question

我有一个顶部导航栏，它的位置是："static"，但当用户滚动超过导航栏的高度时，位置会变为"fixed"，这样导航栏就会附加到窗口的顶部。当滚动回到页面顶部时，它也会切换回“静态”。

导航栏有一个静态横幅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

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