title: Fading bootstrap navbar on scrolldown, while changing text color
body: <p>so I'm working on a Ruby on Rails app with a design given to me which calls for the navigation bar to be transparent at the top of the page, and then fade into solid white after scrolling down past a certian <code>&lt;section&gt;</code> on the page, at the same time, the navbar link text is white at the top, and will fade to grey at the same <code>&lt;section&gt;</code>. </p>
  
  <p>I've looked into JavaScript that changes opacity on scrolldown, but I haven't had success getting it to work. I'd imagine that the same function(s) to fade in the navbar to white, would also work with the navbar links fading to grey as well. </p>
  
  <p>I've also looked into the .affix js [plugin on Bootstrap, but I don't know very advanced javascript to modify it to my needs. In case it's helpful, the navbar's structure in my the app's view starts as: </p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="/"&gt;
          &lt;%= image_tag "logo-small.png" %&gt;
        &lt;/a&gt;
  
  ... "render partial" lines depending on if the user is logged in or not ...
  </code></pre>
  
  <p>Any and all help is appreciated! I'd really love to get this design working, and I've done most of it already, this particular part has me stumped. Any help is appreciated!</p>