当滚动过去将位置更改为固定时，Navbar会使内容跳转

Question

当我滚动它并实现它时，我一直试图让我的导航栏坚持到顶部。唯一的问题是，当执行导航栏转换到固定位置时，我的内容会启动。

以下是此行为的示例：http://jsfiddle.net/7HHa5/4/

的JavaScript

window.onscroll = changePos;

function changePos() {
    var header = document.getElementById("header");
    if (window.pageYOffset > 70) {
        header.style.position = "absolute";
        header.style.top = pageYOffset + "px";
    } else {
        header.style.position = "";
        header.style.top = "";
    }
}

我正在使用bootstrap和jQuery。

我该如何避免这种行为？

Answer 1

当您将标头设置为position: absolute时，它会留下一个由内容填充的空白空间。当标题固定时，您需要在内容的顶部添加边距，如下所示：

window.onscroll = changePos;

function changePos() {
    var header = document.getElementById("header");
    var content = document.getElementById("content");
    if (window.pageYOffset > 70) {
        header.style.position = "absolute";
        header.style.top = pageYOffset + "px";
        content.style.marginTop = '55px'
    } else {
        header.style.position = "";
        header.style.top = "";
        content.style.marginTop = '0'
    }
}

有关示例，请参阅http://jsfiddle.net/2EhLs/1/。

然而，还有更好的方法。

由于您已经在使用Bootstrap，因此您应该考虑使用内置的Affix功能。

最好的例子是来自this one的another question：

$('#nav-wrapper').height($("#nav").height());

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});