Question

我想创建一个双窗格视图，其中屏幕的顶部横幅是固定的，而底部可以水平滚动。当用户水平滚动时，他们仍然应该能够看到相同的顶部横幅。我附上了一些示例代码和相应的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;
}

通过CSS进行多窗格滚动

1 个答案: