单页滚动：如何将横幅保持在顶部

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