javascript - 通过 CSS 实现多 Pane 滚动

Question

我想创建一个双 Pane View ，其中屏幕的顶部横幅是固定的，而底部可以水平滚动。当用户水平滚动时，他们应该仍然能够看到相同的顶部横幅。我附上了一些示例代码和相应的 jsfiddle .

问题在于，当用户从 GROUP2 滚动到 GROUP3 时，顶部标题被裁剪了。我希望标题在用户滚动时继续横跨屏幕顶部。

<div>
  <div class="header">
    COMPANY NAME
  </div>
  <div class="scroller">
    <div class="group1">
      GROUP1
    </div>
    <div class="group2">
      GROUP2
    </div>
    <div class="group3">
      GROUP3
    </div>
  </div>
</div>



.header {
  width:100%;
  height:60px;
  background:red;
}
.scroller {
  overflow-y:hidden;
  overflow-x:scroll;
}
.group1 {
  top:80px;
  left:0px;
  width:500px;
  position:absolute;
}
.group2 {
  top:80px;
  left:540px;
  width:500px;
  position:absolute;
}
.group3 {
  top:80px;
  left:1080px;
  width:500px;
  position:absolute;
}

Answer 1

尝试更新 fiddle

.header {
  width:100%;
  height:60px;
  background:red;
  position: fixed;
  top:0px;
  left:0px;
}