FullPageJS - 固定标题z-index隐藏部分内容

Question

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

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

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

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

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

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

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

  

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

     

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

     

这个包装元素是在中使用的实际元素   基础Waypoint。

     

设置包装纸高度。这确保了包装器的高度相同   作为它包裹的元素，即使该元素被修复。这个   防止页面布局移动。

     

当粘性元素到达窗口顶部时，它会向粘贴元素添加一个类。   这个类是您必须使用CSS来设置粘性元素的样式   固定定位。

Answer 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/

Answer 2

使用占位符来固定元素的方法是正确的。

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

通过为navHeight提供与.section相同的高度，来自placeholder的其他内容不会被固定元素掩盖。在图片中，您可以在.section处于转换状态时看到.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(); 元素。

注意：我还更改了默认的fullPage.css规则，因为我更喜欢将该部分的内容对齐在该部分的顶部。

body
{
height:100%;
width:100%;
}

https://jsfiddle.net/gvsasrnw/