fullPage.js 菜单消失

Question

我对 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 设置为导航，这样它就不会消失，但链接不可点击。

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

Answer 1

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

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

你可以在 fullpage.js online examples.

中清楚地看到这一点

Answer 2

仅将此代码添加到样式或 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;
            }

示例代码片段：

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

  .section {
            background-color: olive;
            z-index: -1;
        }

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

        #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: white;
                    text-decoration: none;
                }

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js"></script>

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

fullPage.js 菜单消失

fullPage.js menu disappearing

css

fullpage.js