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