div 上的条件“静态”到“固定”导致滚动抖动

Question

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

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

当页面刚刚长到需要滚动，但不足以保持滚动高度和导航栏为“固定”时，我遇到了一些抖动，所以当滚动到页面底部时，导航“静态”和“固定”之间的条形抖动。

我已经发布了关于我如何设置它的 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。