通过CSS的多窗格滚动

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; 
}