Javascript固定导航栏跳转

Question

我一直在玩弄一个固定的导航栏，但我注意到当它“固定”自己时，下面的内容都会跳到页面上。 这是 the JSFiddle I've been working on ，如果仔细观察，您会注意到当导航栏固定在屏幕顶部时，内容会向上跳约 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;
}

关于如何修复跳跃的任何解决方案都会非常有帮助。

作为引用，我正在尝试获取类似于 this 的内容页面的最顶部不是导航栏的一部分。

Answer 1

当元素设置为position: fixed 时，它不再占用页面空间，这意味着它不会将页面上的其他元素向下推。因此，一旦您的 javascript 添加了 fixed 类，该元素就不再占用空间，因此其他内容会跳到原来的位置。

为了抵消这一点，您可能需要添加另一条规则来为下一个元素添加诸如上边距之类的内容。上边距需要是(现在)固定元素的高度，加上固定元素中的任何填充和边距:

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

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