單頁滾動：如何將橫幅保持在頂部

Question

我必須逐頁滾動，頂部菜單橫幅總是位於屏幕的頂部。

這裏是my fiddle

$("section").onepage_scroll({ 
 
    sectionContainer: "article", 
 
    loop: false 
 
});

html, body { 
 
    height: 100%; 
 
    padding: 0; margin: 0; } 
 

 
header { 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 0; left: 0; z-index: 100; 
 
    background: yellow; opacity: .5; 
 
    width: 100%; } 
 

 
section { 
 
    background: beige; 
 
    box-sizing: border-box; 
 
    height: 100%; width: 100%; } 
 

 
article { 
 
    position: absolute; 
 
    display: table-row; 
 
    background: brown; 
 
    height: 100%; width: 100%; } 
 

 
article > div { 
 
    float: left; 
 
    width: 50%; 
 
    height: 100%; 
 
    border: 1px solid blue; 
 
    box-sizing: border-box; 
 
    display: table; 
 
    text-align: center; } 
 

 
article > div div { 
 
    display: table-cell; 
 
    vertical-align: middle; } 
 

 
article > div:first-of-type { background: red; } 
 
article > div:last-of-type { background: lightgreen; }

<link href="http://www.thepetedesign.com/demos/onepage-scroll.css" rel="stylesheet"/> 
 
<script src="http://www.thepetedesign.com/demos/jquery.onepage-scroll.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header>this is the top banner</header> 
 
<section> 
 
    <article> 
 
     <div> 
 
      <div>1 this is the first cell</div> 
 
     </div> 
 
     <div> 
 
      <div>this is the second</div> 
 
     </div> 
 
    </article> 
 
    <article> 
 
     <div> 
 
      <div>2 this is the first cell</div> 
 
     </div> 
 
     <div> 
 
      <div>this is the second</div> 
 
     </div> 
 
    </article> 
 
    <article> 
 
     <div> 
 
      <div>3 this is the first cell</div> 
 
     </div> 
 
     <div> 
 
      <div>this is the second</div> 
 
     </div> 
 
    </article> 
 
</section>

我需要顯示的剩餘空間滿格了旗幟。細胞不應該溢出到底部（我應該看到底部的藍色邊框）

PS。

設置邊距的部分滾動時給出了這樣的結果：

說不好，因爲我需要看到完整的「細胞」，直到頁面底部.. 。

我需要的結果是這樣的：

BUT將單元格完全放在頁面中（圖片中單元格的底部溢出頁面底部 - e沒有看到底部的藍色邊框）！

Answer 1

添加以下兩個CSS規則section這可能會成爲你的目的：

<section style=" height: calc(100% - 50px); top:50px;" > <!-- ... --> 

JSFiddle Demo。

注：添加規則的CSS樣式表以某種方式正由插件的製作使用的覆蓋。

Answer 2

添加到您的CSS：

section.onepage-wrapper { 
    margin-top: 50px; 
} 

記住更改標題的高度時，調整數值。你可以做到這一點與jQuery的，太：

$(document).ready(function() { 
    $("section.onepager-wrapper").css({ "margin-top": $("header").height() + "px" }); 
});