Bootstrap Transparent Navbar не работает

Question

Я пытаюсь получить мой загрузочный навигатор, чтобы сначала получить прозрачный фон, но сплошной белый, когда пользователь прокручивается вниз. Я проконсультировался со многими сообщениями SO по этому вопросу и попробовал предлагаемые решения here и here, но это не повлияло. Я использую Rails 4.2.5 и bootstrap-sass камень для моей начальной загрузки, ввозимые через мой application.scss файл с помощью:

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

Я думаю, что что-то буйствовать с моей начальной загрузки, потому что я не могу добиться прозрачного Navbar путем добавления transparent, как класс в навигационное меню, но вложение navbar-inverse работает, чтобы изменить цветовую схему. Кроме того, мне пришлось использовать !important во всех моих элементах css в этой таблице стилей, чтобы заставить их переопределить загрузку. Вот мой код 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'); 
     } 
    }); 
    } 
}); 

Для прозрачной панели навигации, вы можете изменить некоторые CSS на navbar-default

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

UPDATE: https://jsfiddle.net/p7p9t0a0/3/ с использованием наклеить, как упомянуто @daniel