javascript - 如何通过add fixed避免内容跳转？

Question

我在滚动条上创建了一个粘性标题。唯一的问题是，当我向下滚动 1000px 时，类 sticky 被添加到标题中，之后，内容同时有一点跳跃当类 sticky 添加到标题时。我认为这变成了，因为 header 在视觉上标记中的那个地方不再存在。

我试图为页眉添加一个特定的高度。还围绕 container 包装了一个 div，因此 sub-header 保留在该位置，但没有成功。 我应该如何解决这个问题？

在线代码:http://codepen.io/anon/pen/qbaQvL?editors=110

Answer 1

当粘性激活时，您还需要将 about 元素的 margin-top 设置为等于粘性的高度。

应该是这样的:

if (windowPos >= content) {
  $('#sub-header').addClass('sticky');
  $('#about').addClass('sticky-active');

} else {
  $('#sub-header').removeClass();
  $('#about').removeClass();
}

#about.sticky-active {
  margin-top: 96px;
}

我也制作了一个工作版本的codepen。可以看看here .