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