javascript - 将 div 设置为位置 : fixed on scroll with jquery causes content below to jump up

Question

当您向下滚动时，顶部栏会上升，当顶部栏离开视线时，标题会设置为 position: fixed;。一旦发生这种情况，只需单击一下滚轮，下面的内容就会向上跳跃。

我假设它可能是我忽略的简单问题，但想检查一下是否其他人看到了这个问题。我已经仔细查看了它，但无法立即看到发生了什么。

我已经设置了一个 jsfiddle 来完整显示这段代码。

http://jsfiddle.net/yZVjU/

$(document).ready(function() {
    var s = $("#header");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        //$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});

CSS:

#header { float: left; width: 100%; height: 60px; background: #fff; }
#header_left { float: left; display: inline; width: 650px; height: 100px; }
#header_right { float: right; display: inline; width: 200px; height: 100px; text-align: right; }


.stick {
    position:fixed;
    top:0px;
    /*_top: expression( ie6 = (document.documentElement.scrollTop + "px") );*/
    z-index: 1000;
}

如果你到达标题被设置为固定的位置，然后向上和向下点击，你会看到下面的内容跳转超过 1 次点击。

Answer 1

当您将元素设置为 Position Fixed 时，它不再占用文档空间，因为它会像 float 一样。因此 DOM 的其余部分将跳起来，就好像该元素突然被删除一样。

添加一个空的 div，在将 Position 设置为 Fixed 之前，用空白填充该 div，或者分配更多空间给 document 占用。