Question

我必须逐页滚动，顶部菜单横幅始终位于屏幕顶部。

$("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>

我需要在横幅中的剩余空间中显示FULL单元格。单元格不应溢出到底部（我应该看到底部的蓝色边框）

PS。

在页面滚动时设置margin-top到该部分给出了这个结果：

这不好，因为我需要在页面底部看到完整的“单元格”......

我需要这样的结果：

但是会在页面中完全填充（在图片中，单元格的底部溢出页面底部 - 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" });
});

OnePage-scroll：如何将横幅保持在最顶层

2 个答案: