Question

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

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

我认为我的引导程序有些不妥，因为我无法通过将transparent作为类添加到导航菜单来实现透明导航栏，但放入navbar-inverse可以改变颜色方案。此外，我必须在此样式表的所有css项目中使用!important来使它们覆盖引导程序。这是我的navbar 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提到的词缀

Bootstrap透明导航栏无法正常工作

1 个答案: