当位置更改为固定滚动过去时，导航栏使内容跳转

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 = "";
    }
}

我正在使用引导程序和 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 }
});