jquery - 使用 jQuery 添加固定标题时的内容问题

Question

我用 HTML 开发了一个标题。当您滚动超过 25 像素时，类 fixed 将使用 jQuery 添加到标题中。请参阅:http://codepen.io/anon/pen/jPXYKj

fixed 类具有以下属性:

header.fixed {
    position: fixed;
    top: 0;
    width: 1055px;
}

只是固定 header 的基本内容。这是有效的，在 25px 之后它会随着你滚动，但正如你所看到的，内容会跳到上面，因为标题的高度不再是 relative 到其余部分。

因此我的问题。如何解决这个问题，让内容保持在原来的位置，最好不用绝对定位。

我尝试将类 fixed 添加到 body 元素，然后在我的 css 中调用主要部分并向主要元素添加 margin-top，但是当你向下和向上滚动时，主要内容越来越少。

Answer 1

一旦标题固定，只需为 main 元素设置上边距；您的内容将保持其垂直偏移，防止其“跳跃”。为此，您可以向 main 元素添加一个类，或者使用鲜为人知的邻接选择器:

header.fixed + main {
  // 75px header height + 25px header top margin
  margin-top:100px;
}

header.fixed + main 选择 main 元素跟在 header 类 fixed 元素之后。

这个纯 CSS 解决方案的演示 here .