Javascript固定導航欄跳轉

Question

我一直在使用固定的導航欄，但是我注意到，當它“修復”自身時，所有下面的內容都會在頁面上跳轉。 這是我一直在研究的JSFiddle ，如果您仔細觀察，您會注意到當導航欄固定在屏幕頂部時，內容向上跳〜1行。 我試過玩Javascript：

 var win      = $(window),
    fxel     = $('nav'),
    eloffset = fxel.offset().top;


win.scroll(function() {
    if (eloffset < win.scrollTop()) {
        fxel.addClass("fixed");
    } else {
        fxel.removeClass("fixed");
    }
});

但我相當確定問題出在CSS中：

    *{
    margin: 0;
    padding: 0;
}

nav {
    width: 100%;
    background: white;
    height: 35px;
    border-bottom: solid 1px #E8E8E8;
}

nav.fixed {
  position:fixed;
  top: 0;
  right:0px;
  left:0px;
  z-index:999;
  height: 30px;
  border-bottom: solid 1px #E8E8E8;
  padding-bottom: 5px;
}

h1{
    font-family: 'Lobster', cursive;
    font-size: 50px;
    text-align: center;
}

任何有關如何解決跳躍問題的解決方案都將非常有幫助。

為了方便起見，我正在嘗試獲得類似這樣的內容 ，其中頁面的頂部不是導航欄的一部分。

Answer 1

將元素設置為position: fixed ，它將不再占用頁面上的空間，這意味着它不會將其他元素向下推到頁面上。 因此，一旦您的javascript添加了fixed類，該元素就不再占用空間，因此其他內容也會跳到原來的位置。

為了彌補這一點，您可能需要添加另一條規則，以向下一個元素添加諸如上邊距的內容。 上邊距必須是（現在）固定元素的高度，加上該固定元素中的所有填充和邊距：

https://jsfiddle.net/h6g33wne/8/

nav.fixed + * {
  margin-top: 35px;
}