可滚动容器内的粘性 Header

Question

关于 DOM 中的粘性元素有很多问题，并且有很多库可以处理它，例如：

jquery.pin、sticky-kit 等等

但它们的问题是它们只适用于整个 body 被滚动，并且限制 parent 容器必须有默认的溢出设置。

Sticky-kit的示例页面完美展示了我所需要的。只是在他们的情况下，他们实际上使用了 iframe。在我的应用程序中，它是 Div 和 overflow: auto（这是一个具有固定 header、页脚和左侧菜单的 flexbox 布局的应用程序，而主要内容滚动）。

所以当我滚动灰色框时，我希望红色框 'stick me' 停留在那里。绿色元素没有滚动，它们从不移动。我的要求：

body 不滚动
没有 iframe
我希望没有超时运行每 50 毫秒

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

position:fixed on the red box, and a) duplicate its content (not an option) b) 动态调整灰色容器的 margin/padding 以强制元素保持在红色框（完美但框可能会扩展，并且不容易监控其高度并重新调整边距）。像这个，但是 header 高度可能会改变：http://jsfiddle.net/KTgrS/
position: absolute 在红框上，在灰框的滚动事件上重新调整。可能，但卷轴同样不提供卷轴'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 或粘性东西:-)

可滚动容器内的粘性 Header

Sticky Header within a Scrollable Container

jquery

html

css

sticky

正确答案

原回答：