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

此屏幕截图显示导航在开始时正确显示。向下滚动时，它会消失，但顶部仍然存在通常导航的间隙。我尝试手动设置位置：固定到导航，这样它没有消失，但链接无法点击。

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

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菜单消失了

2 个答案: