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

Question

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

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

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

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

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

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

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) 给你的内容容器一个类，然后放一个 margin-top在那个高度与标题相同的内容容器上。在您的情况下，大约是 60px .如果它是可变高度(您在 JSFiddle 上的示例不是)，请考虑使用 calc() 在你的 CSS 中。

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/