我有一个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>
答案 0 :(得分:1)
只需使用菜单的css属性z-index
将其放在任何其他图层上:
.bg-inverse{
z-index: 999;
}