Css fullPage.js菜单消失_Css_Fullpage.js

Css fullPage.js菜单消失

css

Css fullPage.js菜单消失,css,fullpage.js,Css,Fullpage.js,我有一个问题。我的菜单不会停留在网站顶部，而是在向下滚动时消失。尽管如此，幻灯片还是有一个偏移量，但菜单不在那里。这是我的密码： <body> <ul id="menu"> <li><a href="#firstPage">firstPage</a></li> <li><a href="#secondPage">secondPage</a></

我有一个问题。我的菜单不会停留在网站顶部，而是在向下滚动时消失。尽管如此，幻灯片还是有一个偏移量，但菜单不在那里。这是我的密码：

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

在CSS中，我删除了任何可能导致麻烦的内容，但如下所示：

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

此屏幕截图显示导航在开始时正确显示。当你向下滚动时，它消失了，但在顶部仍然有一个间隙，通常是导航的位置。我试着手动设置位置：固定在导航上，这样它就不会消失，但是链接是不可点击的。

问题是：部分位于菜单上方。

您需要使用固定位置的菜单。大概是这样的：

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

您可以在中清楚地看到这一点。

仅将此代码添加到样式或css文件：

#menu {
        width: 100%;
        height: 50px;
        position: fixed;
        z-index: 50;
        background: red;
        left: 0px;
        right: 0px;
        top: 0px;
        padding: 0px;
        margin: 0px;
    }

        #menu li {
            display: inline-block;
            padding: 15px;
        }

            #menu li a {
                color: #fff;
                text-decoration: none;
            }

示例代码段：

$（文档）.ready（函数（）{
$（“#全页”）。全页({
滚动速度：300，
菜单：“#菜单”，
锚定：['firstPage'，'secondPage'，'thirdPage']
});
});
部分{
背景颜色：橄榄色；
z指数：-1；
}
.部分：第n个孩子（2n）{
背景颜色：橙色；
}
#菜单{
宽度：100%；
高度：50px；
位置：固定；
z指数：50；
背景：红色；
左：0px；
右：0px；
顶部：0px；
填充：0px；
边际：0px；
}
#菜单里{
显示：内联块；
填充：15px；
}
#菜单李a{
颜色：白色；
文字装饰：无；
}






某段
某段
某段

#menu {
        width: 100%;
        height: 50px;
        position: fixed;
        z-index: 50;
        background: red;
        left: 0px;
        right: 0px;
        top: 0px;
        padding: 0px;
        margin: 0px;
    }

        #menu li {
            display: inline-block;
            padding: 15px;
        }

            #menu li a {
                color: #fff;
                text-decoration: none;
            }