Question

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

我尝试在标题中添加特定高度。同时在sticky周围包裹div，以便container停留在该位置，但没有成功。我该如何解决这个问题？

直播代码：http://codepen.io/anon/pen/qbaQvL?editors=110

Answer 1

当粘贴激活时，您还需要将约束元素的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。

Answer 2

在创建粘性标题时，只需向主体添加填充：

JS：

if (windowPos >= content) {
  $('#sub-header').addClass('sticky');
  $('body').addClass('sticked');
} else {
  $('#sub-header').removeClass();
  $('body').removeClass('sticked');
}

CSS：

body.sticked {
  padding-top: 96px;
}

Answer 3

你可以在滚动期间给标题一个绝对定位：

...
#sub-header {
    position: absolute;
  width: 100%;
}
#sub-header, #sub-header.sticky {
    background: #FFF;
    border-bottom: 1px solid #f0f0f0; 
    z-index: 2000;
}
...

...并为您的部分添加填充：

section {
  padding-top: 96px;
}

http://codepen.io/anon/pen/PZGxMZ

如何通过添加固定来避免内容跳转？

3 个答案: