title: Change navbar background color on page scroll
body: <p>Im having trouble getting my fixed top navbar to change <code>background-color</code> when I scroll the page.</p>
  <p>Here is the function in JS:</p>
  <pre><code>$(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 &gt; offset.top) {
                  $(&quot;.navbar&quot;).css('background-color', '#f0f0f0');
              } else {
                  $('.navbar').css('background-color', 'transparent');
              }
          });
      }
   });
  </code></pre>
  <p>This is a file called &quot;<code>custom.js</code>&quot; and loaded at the bottom of the page AFTER I load <code>bootstrap and jquery</code> (<code>custom.js</code> is in the same folder as <code>index.html</code>)</p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;custom.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Here is the html navbar:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;nav class=&quot;navbar navbar-default navbar-fixed-top&quot;&gt;
          &lt;div class=&quot;container-fluid&quot;&gt;
              &lt;div class=&quot;navbar-header &quot;&gt;                  
                  &lt;button type=&quot;button&quot; class=&quot;navbar-toggle collapsed&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNav&quot;&gt;
                      &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div id=&quot;navbarNav&quot; class=&quot;navbar-collapse collapse &quot;&gt;
                  &lt;br/&gt;&lt;br/&gt;
                  &lt;ul class=&quot;nav navbar-nav navbar-right &quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;CALCULATORS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And then only css I have for navbar background color change:</p>
  <pre class="lang-css prettyprint-override"><code>.navbar {
      background-color: transparent;
      border-color: transparent;
  }
  
  .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
      background-color: transparent !important;
  }
  </code></pre>