jquery - 可滚动容器内的粘性 header

Question

关于 DOM 中的粘性元素以及处理它的各种库存在很多问题，例如:

jquery.pin、sticky-kit 等等

但所有这些的问题是它们仅适用于滚动的整个主体，并且限制父容器必须具有默认的溢出设置。

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

因此，当我滚动灰色框时，我希望红色框“粘住我”保留在那里。绿色元素没有滚动并且永远不会移动。我的要求:

• 正文不滚动
• 没有 iframe
• 我不希望每 50 毫秒运行一次超时

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

• 位置:固定在红色框上，a)复制其内容(不是选项)b)动态调整灰色容器的边距/填充，以强制元素保持在红色框下方(完美，但盒子可能会膨胀，并且不容易监控其高度并重新调整边距)。像这样，但标题高度可能会改变:http://jsfiddle.net/KTgrS/

• 位置:红色框上的绝对位置，并在灰色框的滚动事件上重新调整它。可能，但滚动不提供滚动“增量”，并且获取它有点粗略。

还有其他想法或方法可以使上述想法或方法适用于实际生产使用吗？对最新浏览器的支持就足够了。

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 或粘性的东西:-)