導航欄將位置更改為固定時，導航欄使內容跳轉

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 }
});