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

时间:2017-04-28 04:48:35

标签: ruby-on-rails twitter-bootstrap navbar fullpage.js

我有一个rails 5 app,它同时使用bootstrap 4和fullPage.js(我已经禁用了turbolinks)。我有一个bootstrap导航栏,其中包含指向主页上几个不同部分的链接。这是有效的,只要当前显示的部分是第一个。如果我滚动或单击指向其他部分的链接,导航栏中的所有链接都会被禁用

知道这是怎么回事吗?

这是我的导航栏(我知道我有一条通往"外出"路线退出的路径,但我认为不应该导致此问题):

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

1 个答案:

答案 0 :(得分:1)

只需使用菜单的css属性z-index将其放在任何其他图层上:

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