gpt4 book ai didi

css - fullPage.js 菜单消失

转载 作者:行者123 更新时间:2023-11-28 06:19:45 25 4
gpt4 key购买 nike

我对 fullPage.js 有疑问.我的菜单不会留在网站顶部,而是在我向下滚动时消失。幻灯片仍然有偏移量,但菜单不存在。这是我的代码:

<body>
<ul id="menu">
<li><a href="#firstPage">firstPage</a></li>
<li><a href="#secondPage">secondPage</a></li>
<li><a href="#thirdPage">thirdPage</a></li>
</ul>
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
</body>

初始化:

$(document).ready(function() {
$('#fullpage').fullpage({
scrollingSpeed: 300,
menu: '#menu',
anchors:['firstPage', 'secondPage', 'thirdPage']
});
});

在 CSS 中,我已经删除了任何可能引起麻烦的东西,但就是这样:

.section{
background-color: olive;
z-index: -1;
}
.section:nth-child(2n){
background-color: orange;
}

此屏幕截图显示导航在开始时正确显示。当你向下滚动时,它会消失,但在顶部导航通常会出现的地方仍然有一个空隙。我尝试手动设置 position:fixed 到导航,这样它就不会消失,但链接不可点击。

问题:这些部分位于菜单上方。

最佳答案

为此您需要使用固定位置的菜单。像这样:

#menu{
position:fixed;
z-index: 99;
top: 20px;
left: 20px;
}

您可以在 fullpage.js online examples 中清楚地看到这一点.

关于css - fullPage.js 菜单消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35671326/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com