将FullPageJS用于具有固定顶部菜单的当前项目,该菜单会根据视口大小更改其高度。
狭窄的屏幕会将菜单项堆叠在一起,而较宽的屏幕会使菜单项彼此相邻,从而导致菜单高度不同。
Looking at the Fixed Elements demo from FullPageJS例如,如果我使用Firefox中的开发工具检查“固定元素” h1并向上移动两个元素,直到到达.fp-tableCell
,然后取消选择vertical-align:middle
,一个就可以观察到文本在固定标题下的移动。
好吧,它实际上并没有移动,而是到达了其容器的顶部边界。这意味着这些部分始终是视口高度的100%,这意味着在表格单元格元素中间未垂直对齐的部分中的内容将被诸如固定导航之类的固定元素隐藏。
我想要得到的确实是一个固定的页眉或固定的页脚,但是没有“固定”在固定元素下面的部分,但实际上停在固定元素的边界以不隐藏该部分的内容。
一种方法是将占位符元素注入固定元素当前高度的高度,然后将其放置在固定元素下方与当前部分相同的流上,从而限制该部分“在固定元素下方滑动”。
Waypoints Sticky Elements对动态创建的粘性或固定元素执行此操作:
在您的元素周围创建了一个包装器。
该包装器保持在页面上的静态位置,充当
文档流中该元素的空占位符,而实际
元素获得和失去固定的位置。
该wrapper元素是在
底层Waypoint。
设置包装纸高度。这样可以确保包装纸的高度相同
作为包装的元素,即使该元素变得固定。这个
防止页面布局在移动时发生偏移。
当其到达窗口顶部时,将类添加到sticky元素。
此类是您必须使用CSS设置粘性元素样式的类
固定位置。
最佳答案
您想得太多了。
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
声明即可正常工作。您可能想再次查看您的示例。我为您更新了代码。现在可以使用,但是您的问题无处不在,所以我对此不十分确定:http://jsfiddle.net/yaJyK/98/
关于jquery - FullPage JS-固定的 header z-index隐藏部分内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35584337/