Question

当您向下滚动时，顶部栏会向上移动，当顶部栏看不见时，标题会设置为position: fixed;。一旦发生这种情况，下面的内容会有一个巨大的跳跃，只有一个滚轮点击。

我假设它可能是一些简单的我忽略了，但想检查是否有其他人看到了这个问题。我已经仔细研究过了，但是真的看不到发生了什么事。

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

$(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时，它会停止从文档中占用空间，因为它会像浮动一样。因此，DOM的其余部分会跳起来，好像该元素被突然删除一样。

添加一个空div，在设置Position to Fixed之前，请用空格填充该div，或为document分配更多空间以占用。

将div设置为position：使用jquery固定滚动会导致下面的内容跳起来

1 个答案: