可滚动容器中的粘滞标头

Question

有很多关于DOM中的粘性元素和广泛的库来处理它的问题，例如：

jquery.pin，sticky-kit等等

但是所有这些问题的问题在于它们只能在滚动整个主体的情况下工作，并且限制父容器必须具有默认溢出设置。

Sticky-kit的示例页面完全展示了我的需求。就他们的情况而言，他们实际上使用的是iframe。在我的作品中，它是一个带有overflow: auto的Div（它是一个带有弹性框布局的应用程序，带有固定页眉，页脚和左侧菜单，而主要内容滚动）。

所以我想要红盒子“坚持我”＃39;当我滚动灰色框时留在那里。绿色元素没有滚动，它们永远不会移动。我的要求：

• 身体不会滚动
• 没有iframes
• 我不希望每50毫秒没有超时

到目前为止，我可以看到几种解决方案：

• 位置：固定在红色框上，并且a）复制其内容（不是选项）b）动态调整灰色容器的边距/填充以强制元素保持在红色框下方（完美但是盒子可能会膨胀，并且不容易监视其高度并重新调整边距）。与此类似，但标题高度可能会发生变化：http://jsfiddle.net/KTgrS/

• 位置：红色框上的绝对位置，并在灰色框的滚动事件上重新调整它。可能，但滚动条没有提供滚动的“delta”，并且让它变得粗略。

是否有任何其他想法或方法可以使上述内容适用于实际生产用途？支持最近的浏览器就足够了。

Answer 1

正确答案

轻松完成此任务：

$('.greybox').on('scroll',function(event){
  $('.redbox').css({top: $(this).scrollTop()});
});

原始答案：

将红色和灰色放在同一级别的容器中会更容易。

<div class="container">
  <div class="redbox"></div>
  <div class="greybox"></div>
</div>

用于造型：

.container
{
  position: relative;
  width: ...px;
  height: ...px;
}
.redbox
{
  position: absolute;
  top: 0px;
  height: 20px;
  left: 0px;
  right: 0px;
  background: red;
  z-index: 1;
}
.greybox
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top:  20px; // height of the redbox
  box-sizing: border-box;
  z-index: 0;
}

现在redbox看起来很粘，但你根本不需要任何JS或粘性东西： - ）