FullPage JS - 修复 header z-index 隐藏部分内容

Question

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

窄屏幕会将菜单项堆叠在一起，而较宽的屏幕会将菜单项并排放置，从而导致菜单的高度不同。

Looking at the Fixed Elements demo from FullPageJS 例如，如果我在 Firefox 中使用开发工具检查 "Fixed elements" h1 并向上移动两个元素，直到我到达 .fp-tableCell 然后我取消选择 vertical-align:middle 一个可以观察固定header.

下移动的文字

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

我想要得到的确实是固定的 header 或固定的页脚，但没有 "go under" 固定元素的部分，但实际上停在固定元素的边界处不隐藏部分的内容。

一种方法是注入一个占位符元素，其高度为固定元素的当前高度，并将其放置在与当前部分相同的流中的固定元素下方，从而限制该部分"sliding under"固定元素。

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

A wrapper is created around your element.

This wrapper remains in a static position on the page, acting as an empty placeholder for that element in the document flow while the real element gains and loses fixed positioning.

This wrapper element is the actual element that is used in the underlying Waypoint.

The wrapper height is set. This ensures the wrapper is the same height as the element it wraps, even when that element becomes fixed. This prevents the page layout from shifting when it does.

Adds a class to the sticky element when it hits the top of the window. This class is what you must style using CSS to give the sticky element fixed positioning.

Answer 1

你想多了。

1) 给你的内容容器一个 class 并在那个内容容器上放置一个 margin-top，其高度与你的 header 相同。在您的情况下，大约是 60px。如果它是可变高度（您在 JSFiddle 上的示例不是），请考虑在 CSS.

中使用 calc()

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

CSS:

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

2) 您的 header 上面有三个不同的位置声明！如果你想要一个固定的 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) 我测试时，菜单项的高度对 header 大小没有影响。它甚至不需要 z-index 声明即可正常工作。您可能想再次查看您的示例。

我为您更新了代码。它现在有效，但你的问题到处都是，所以我对此不是 100% 确定：http://jsfiddle.net/yaJyK/98/

Answer 2

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

前置 div，例如dummy-buffer 或 placeholder 到 .fp-tableCell class 与固定元素高度的高度。在这个例子中 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/

FullPage JS - 修复 header z-index 隐藏部分内容

FullPageJS - fixed header z-index hides section's content

html

css

jquery

fullpage.js