Bootstrap透明導航欄不工作

我想讓我的bootstrap導航欄最初有一個透明的背景，但用戶滾動時卻是純白的。我已經諮詢了許多關於此的SO帖子，並嘗試了建議here和here的解決方案，但無效。Bootstrap透明導航欄不工作

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

我覺得事情是橫行與我的引導，因爲我無法實現透明的導航欄加入transparent如：我用Rails 4.2.5和bootstrap-sass寶石爲我的引導，通過我的application.scss文件採用進口一個類導航菜單，但在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職位和他們都沒有固定的這個問題。任何幫助，將不勝感激。

來源

2016-06-12 Liz

要在滾動時將顏色更改爲白色，您需要一些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

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

UPDATE編輯一些CSS：https://jsfiddle.net/p7p9t0a0/3/ 使用加蓋如果使用引導程序，爲什麼寫很多的是，由@daniel

來源

2016-06-12 22:08:33 Ritwick

提到js代碼而不是使用詞綴引導插件。 [Affix - Bootstrap]（http://getbootstrap.com/javascript/#affix）？使用詞綴類切換coler和其他東西會更有效率。 – Daniel

Good call，@Daniel儘管我不認爲js會嚴重影響網站的效率，但我仍然使用工作[fiddle]（https://jsfiddle.net/p7p9t0a0/3/）更新了答案詞綴。 – Ritwick

感謝您考慮我的建議。對不起，通過高效，我意味着爲什麼要編寫新的代碼而不是使用已有的功能。例如，如果您由於某些原因需要解除綁定用戶事件偵聽器，$（window）.off（「scroll」）將終止所有全局偵聽滾動事件。使用$（「＃myelement」）。off（「affix」）解綁定事件監聽器只會殺死聽到您選擇的元素的實例 – Daniel

Bootstrap透明導航欄不工作

回答

相關問題