Bootstrap affix导航栏仅适用于刷新

时间:2016-07-15 18:19:33

标签: css ruby-on-rails twitter-bootstrap navbar affix

我正在尝试为我的一位朋友创建一个网站(也用于学习目的)。现在我正在尝试用Bootstrap创建一个词缀导航栏。 (顺便说一下,我在使用ruby on rails的cloud9上编码)。

如果我预览我的网站,那么词缀导航栏的效果非常好,但在点击导航栏中的某个链接后,导航栏就会停留在横幅下方的位置。通过检查元素,我发现在单击其中一个链接后,词缀类不会再附加到导航栏。我花了几个小时尝试和修复,但似乎没有任何工作。

所以我真的希望你们其中一个人可以帮助我。 提前谢谢。

我的application.html.erb的代码是:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NL-Renovatie</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body data-spy="scroll" data-target="nav" data-offset="50">

<div class="container-fluid header">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
</div>

<nav class="navbar navbar-inverse navbar-static-top" role="navigation" data-spy="affix" data-offset-top="197">
  <div class='container-fluid'>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to root_path, class: 'navbar-brand' do %>
          <i class="fa fa-home fa-lg"aria-hidden="true"></i>
          Home
      <% end %>
    </div>
    <div class="collapse navbar-collapse" id="main-nav-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li id='navbar-button'>
          <%= link_to overons_path do %>
            <i class="fa fa-users" aria-hidden="true"></i>
            Over Ons
          <% end %>
        </li>
        <li id='navbar-button'>
          <%= link_to new_contact_path do %>
            <i class="fa fa-envelope" aria-hidden="true"></i>
            Contact
          <% end %>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>
<div class="container-fluid">
  <% flash.each do |key, value| %>
    <%= content_tag :div, value, class: "alert alert-#{key}" %>
  <% end %>
  <%= yield %>
</div>

</body>
</html>

我的application.css.scss的代码是:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

.affix {
    top: 0;
    width: 100%;
}

.affix + .container-fluid {
    padding-top: 70px;
}

.header {
    background-color:#F44336;
    color:#fff;
    height:200px;
}

1 个答案:

答案 0 :(得分:2)

问题是由turbolinks引起的。修复方法如下:

在application.js文件中,我不得不删除以下行:

//= require turbolinks

在application.html.erb中,我将data-turbolinks-track设置为false:

 <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => false %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>