title: How to replace image in Bootstrap navbar-brand on scroll with jQuery?
body: <p>Basically my problem is that I'd like to change the navbar-brand image file in my Bootstrap navigation to a different one once you start scrolling through the website. 
  The navigation bar is transparent when the website is sitting at the top of the page, but once you start to scroll, the navigation background becomes white. I'd like for the image on the navbar-brand to also change to a different colored one that I have so it remains visible once the navigation background changes. </p>
  
  <p>Anybody got some ideas? Here's the HTML and current jQuery markup I have.</p>
  
  <pre><code>    &lt;div class="container"&gt;
              &lt;!-- Navbar Header --&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;!-- Collapse Toggle --&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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;!-- /.collape-toggle --&gt;
  
                  &lt;!-- Navbar Brand --&gt;
                  &lt;a href="#" class="navbar-brand"&gt;&lt;img src="img/blockins-logo.png" alt="Logo" draggable="false"&gt;&lt;/a&gt;
                  &lt;!-- /.navbar-brand --&gt;
              &lt;/div&gt;
              &lt;!-- /.navbar-header --&gt;
  
              &lt;!-- Navbar Menu --&gt;
              &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
                  &lt;!-- Menu --&gt;
                  &lt;ul class="nav navbar-nav justified"&gt;
                      &lt;li role="presentation"&gt;&lt;a href="#page-top"&gt;Welcome&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="presentation"&gt;&lt;a href="#"&gt;Our Story&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="presentation"&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="presentation"&gt;&lt;a href="#"&gt;Programs&lt;/a&gt;&lt;/li&gt;
                      &lt;li role="presentation"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li role="presentation"&gt;
                          &lt;form class="navbar-form"&gt;
                              &lt;a href="#" class="btn btn-primary"&gt;&lt;i class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;Career Opportunities&lt;/a&gt;
                          &lt;/form&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;!-- /.menu --&gt;
              &lt;/div&gt;
              &lt;!-- /.navbar-menu --&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  $(document).ready(function() {
  // Navigation color change 
  $(window).scroll(function() {
      if ($(document).scrollTop() &lt; 50) {
          $('nav').addClass('transparent');
      } else {
          $('nav').removeClass('transparent').css('color: black');
          $('')
      }
  });
  </code></pre>
  
  <p>});</p>