Bootstrap Transparent Navbar not Working - css

Question

I am trying to get my bootstrap navbar to have a transparent background initially, but solid white when the user scrolls down. I have consulted many SO posts on this and tried the solutions suggested here and here, but to no effect. I am using Rails 4.2.5 and the bootstrap-sass gem for my bootstrap, imported via my application.scss file using:
#import "bootstrap-sprockets";
#import "bootstrap";
I think something is amok with my bootstrap because I can't achieve a transparent navbar by adding transparent as a class to the navigation menu, yet putting in navbar-inverse works to change the color scheme. Also, I have had to use !important in all of my css items on this stylesheet to get them to override bootstrap. Here's my navbar html.erb code:
<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>Generator</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>
I know this post subject may be duplicating others', but I have read dozens of SO posts and none of them have fixed this issue. Any help would be appreciated.

Answer 1

To change the color to white on scroll, you'll need some javascript.
Here's a working 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');
}
});
}
});
For the transparent navbar, you can edit some css on the navbar-default
.navbar-default {
background: transparent;
border: none !important;
}
UPDATE: https://jsfiddle.net/p7p9t0a0/3/
using affix as mentioned by #daniel