Javascript 固定导航栏跳转

Question

我一直在玩固定导航栏，但我注意到当它 "fixes" 本身时，下面的内容都会跳到页面上。这是 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 时，它不再占用页面上的 space，这意味着它不会将页面上的其他元素向下推。因此，一旦您的 javascript 添加了 fixed class，该元素就不再占用 space，因此其他内容会跳起来占据它所在的位置。

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

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

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

Javascript 固定导航栏跳转

Javascript Fixed Navigation Bar Jumping

javascript

jquery

html

css

nav