FullPage JS - 固定标题 z-index 隐藏部分内容答案

【问题标题】：FullPageJS - fixed header z-index hides section's contentFullPage JS - 固定标题 z-index 隐藏部分内容
【发布时间】：2016-03-27 18:15:24
【问题描述】：

将 FullPageJS 用于当前项目，该项目具有根据视口大小改变其高度的固定顶部菜单。

窄屏幕将菜单项堆叠在一起，而宽屏幕将使菜单项彼此相邻，从而导致菜单的高度不同。

Looking at the Fixed Elements demo from FullPageJS 例如，如果我在 Firefox 中使用开发工具检查“固定元素”h1 并向上移动两个元素，直到达到 .fp-tableCell 并在那里取消选择 vertical-align:middle 可以观察到文本在固定标题下移动.

好吧，它实际上并没有移动，而是移动到其容器的顶部边框。这意味着这些部分始终是视口高度的 100%，这意味着在表格单元格元素中未垂直对齐在中间的部分中的内容将被固定元素隐藏，例如固定导航.

我想要得到的确实是一个固定的页眉或固定的页脚，但没有“进入”固定元素的部分，但实际上停在固定元素的边界以不隐藏部分的内容。

一种方法是注入一个占位符元素，其高度与固定元素的当前高度相同，并将其放置在与当前部分相同的流上的固定元素下，因此限制部分“滑动”在固定元素之下.

Waypoints Sticky Elements 对动态创建的粘性或固定元素执行此操作：

围绕您的元素创建一个包装器。

此包装器保持在页面上的静态位置，充当文档流中该元素的空占位符，而真正的元素获得和失去固定定位。

这个包装元素是实际使用的元素底层 Waypoint。

包装高度已设置。这确保了包装器的高度相同作为它包装的元素，即使该元素变得固定。这个防止页面布局发生变化。

当粘性元素到达窗口顶部时，为粘性元素添加一个类。这个类是你必须使用 CSS 来赋予粘性元素的样式固定定位。

【问题讨论】：

标签： jquery html css fullpage.js

【解决方案1】：

你想多了。

1) 给你的内容容器一个类，并在该内容容器上放置一个margin-top，其高度与你的标题相同。在你的情况下，这大约是60px。如果它是可变高度（您在 JSFiddle 上的示例不是），请考虑在您的 CSS 中使用 calc()。

HTML： <div class="content-area">

CSS：

.content-area {
  margin-top: 60px;
  padding: 0 60px 60px;
}

2) 你的header 上面有三个不同的位置声明！如果你想要一个固定的标题，它只是position:fixed; 代码如下所示：

header {
    width: 100%;
    height: 50px;
    background-color: hsla(0, 0%, 20%, 1);
    box-shadow: 0px 2px 8px #222;
    position: fixed;
    top: 0;
}

3) 我测试时，菜单项的高度对标题大小没有影响。它甚至不需要z-index 声明即可正常工作。您可能想再次查看您的示例。

我为你更新了你的代码。它现在有效，但你的问题无处不在，所以我不能 100% 确定这一点：http://jsfiddle.net/yaJyK/98/

【讨论】：

【解决方案2】：

对从流程中提取的固定元素使用占位符的方法是正确的。

添加一个 div，例如dummy-buffer 或 placeholder 到具有固定元素高度高度的 .fp-tableCell 类。在此示例中，navHeight 是固定元素的总高度。

通过将placeholder 赋予与navHeight 相同的高度，.section 中的其余内容将不再被固定元素所掩盖。在图像中，您可以看到placeholder 元素，而.section 正在转换。

注意：我还更改了默认的 fullPage.css 规则以使其正常工作，因为我更喜欢让该部分的内容在该部分的顶部对齐。

.fp-tableCell {
  vertical-align:top !important;
}

$('.fp-tableCell').prepend($('<div class="dummy-buffer">DUMMY BUFFER</div>'));

var navHeightUpdate = function(){
    var navHeight = $('.navigation').outerHeight();
    console.log('Navigation Height = '+navHeight);
    $('.dummy-buffer').css('height',navHeight); 
};

navHeightUpdate();

https://jsfiddle.net/gvsasrnw/

【讨论】：