title: How can I change the bootstrap nav bar from a clear bar to a black bar on scroll?
body: <p>I'm working on a project where I would like the bootstrap nav bar to appear transparent until you start scrolling then a black bar will replace the transparent bar. I know that there are similar tutorials out there. But I want to work with the one I started creating. However, I am just not sure how to target it correctly, and what css properties I need for the effect I want. Thanks in advance!</p>
  
  <p>Sorry fixed. Want it from clear bar to black bar on scroll.</p>
  
  <p><a href="https://jsfiddle.net/qbhx8jke/" rel="nofollow noreferrer">https://jsfiddle.net/qbhx8jke/</a></p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-   toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&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;JO Project&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="collapse navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="#part1"&gt;Part 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#part2"&gt;Part 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#part3"&gt;Part 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#part4"&gt;Part 4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
  $(window).scroll(function(){
      if($(window).scrollTop() &gt; $(window).height()){
          $(".navbar").css({"background-color":"transparent"});   
      }
  })
  </code></pre>
  
  <p>})
  </p>