导航栏将位置更改为固定时，导航栏使内容跳转

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功能。

最好的例子就是这样一个从另一个问题 ：

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

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