引导透明导航栏不起作用

Question

我试图让我的引导导航栏最初具有透明背景，但当用户向下滚动时为纯白色。我已经咨询了许多关于此的 SO 帖子并尝试了建议的解决方案 here 和 here，但没有效果。我正在使用 Rails 4.2.5 和 bootstrap-sass gem 作为我的引导程序，通过我的 application.scss 文件导入：

@import "bootstrap-sprockets";
@import "bootstrap";

我认为我的引导程序有些问题，因为我无法通过将transparent 作为类添加到导航菜单来实现透明导航栏，但输入navbar-inverse 可以更改配色方案。此外，我必须在此样式表上的所有 css 项目中使用 !important 以使它们覆盖引导程序。这是我的导航栏 html.erb 代码：

 <nav class="navbar" id="main_navbar">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/"><%= image_tag 'Flame.png', style: "height: 100%"%></a>
      </div>
      <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li><%= link_to 'Workouts', workouts_path, class:"waves-effect waves-light" %></li>
          <!-- <li><a href="javascript:void(0)">Generator</a></li> -->
          <li><%= link_to 'Blog', posts_path, class:"waves-effect waves-light" %></li>
          <li><%= link_to 'Weekly WOW', weeklies_path, class:"waves-effect waves-light" %></li>
          <li><%= link_to 'Rants', rants_path, class:"waves-effect waves-light" %></li>
          <li><%= link_to 'About Us', home_about_path, class:"waves-effect waves-light" %></li>
          <% if current_user %>
            <li><%= link_to('My Profile', edit_user_registration_path(current_user)) %></li>
          <% else %>
            <li><%= link_to('Sign In', new_user_session_path) %></li>
          <% end %>
        </ul>
      </div>
    </div>
  </nav>

我知道这个帖子主题可能与其他人重复，但我已经阅读了几十篇 SO 帖子，但没有一个解决了这个问题。任何帮助将不胜感激。

Answer 1

要在滚动时将颜色更改为白色，您需要一些 javascript。

这是一个有效的fiddle。

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".navbar-default").css('background-color', '#f0f0f0');
       } else {
          $('.navbar-default').css('background-color', 'transparent');
       }
   });
    }
});

对于透明导航栏，你可以在navbar-default上编辑一些css

.navbar-default {
   background: transparent;
   border: none !important; 
}

更新：https://jsfiddle.net/p7p9t0a0/3/ 使用@daniel 提到的词缀