Rails、Bootstrap 和 FullPage.js 导航栏导航仅适用于第一部分

Question

我有一个 rails 5 应用程序，它同时使用 bootstrap 4 和 fullPage.js（为此我禁用了 turbolinks）。我有一个引导导航栏，其中包含指向主页上几个不同部分的链接。只要当前显示的部分是第一个，就可以了。如果我滚动或单击指向不同部分的链接，导航栏中的所有链接都会以某种方式被禁用

知道这是怎么发生的吗？

这是我的导航栏（我知道在注销时我有一条通往“外部”路线的路径，但我认为这不会导致这个问题）：

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse" id="menu" role="navigation">
    <a class="navbar-brand mx-auto" href="#firstPage">My Brand</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <% if user_signed_in? %>
                <li data-menuanchor="firstPage" class="nav-item"><a class="nav-link" href="#firstPage">Link One</a></li>
                <li data-menuanchor="secondPage" class="nav-item"><a class="nav-link" href="#secondPage">Link Two</a></li>
                <li data-menuanchor="thirdPage" class="nav-item"><a class="nav-link" href="#thirdPage">Link Three</a></li>
                <li data-menuanchor="fourthPage" class="nav-item"><a class="nav-link" href="#fourthPage">Link Four</a></li>
            <% end %>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <% if user_signed_in? %>
            <li class="nav-item navbar-right">
                <%= link_to 'Log Out', destroy_user_session_path, :method => :delete, :class => 'nav-link'%>     
            </li>
            <% end %>
        </ul>
    </div>
</nav>

application.js 中的 fullPage.js 初始化（真的很简单）：

//= require jquery
//= require tether
//= require jquery_ujs
//= require bootstrap
//= require fullpage
//= require_tree .

$(document).ready(function() {
    console.log("Page Loaded")
    $('#fullpage').fullpage({
        anchors:['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
    });
});

最后是实际部分：

<div id="fullpage">
    <div class="section" data-anchor="firstPage">
        <div class="container-fluid draw-border">
            Some Content
        </div>
    </div>
    <div class="section" data-anchor="secondPage">Section 2</div>
    <div class="section" data-anchor="thirdPage">Section 3</div>
    <div class="section" data-anchor="fourthPage">Section 4</div>
</div>

Answer 1

只需使用 css 属性 z-index 为您的菜单将其放置在任何其他层上：

.bg-inverse{
    z-index: 999;
}