title: change color navbar after scroll
body: <p>i want to change the color of my navbar when i scroll. When the navbar is on top the background is transparent.
  thank's to all for the attention and excuse me for my bad english!!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* COLORE NAVBAR */
  
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
    box-shadow: 1px 1px #000;
  }
  .navbar-toggle {
    background-color: transparent;
    border: none;
  }
  .navbar-toggle:hover {
    background-color: transparent! important;
  }
  .navbar-toggle:focus {
    background-color: transparent! important;
  }
  .navbar-default {
    background-color: transparent;
    border-color: transparent;
  }
  .navbar-default .navbar-nav&gt;li&gt;a {
    color: #FFF;
    text-shadow: 1px 1px #000;
  }
  .navbar-default .navbar-nav&gt;li&gt;a:focus,
  .navbar-default .navbar-nav&gt;li&gt;a:hover {
    color: red;
  }
  .navbar-default .navbar-nav&gt;.active&gt;a,
  .navbar-default .navbar-nav&gt;.active&gt;a:focus,
  .navbar-default .navbar-nav&gt;.active&gt;a:hover {
    background-color: yellow;
  }
  .navbar-default .navbar-nav&gt;.open&gt;a,
  .navbar-default .navbar-nav&gt;.open&gt;a:focus,
  .navbar-default .navbar-nav&gt;.open&gt;a:hover {
    background-color: blue;
  }
  .dropdown-menu&gt;li&gt;a {
    color: green;
  }
  .dropdown-menu&gt;li&gt;a:hover {
    background-color: brown;
    color: violet;
  }
  .navbar-brand&gt;li&gt;a:hover {
    color: white;
  }
  @media only screen and (max-width: 766px) {
    .collapsing,
    .in {
      background: #fff;
    }
    .collapsing ul li a,
    .in ul li a {
      color: #fff!important;
      float: left;
    }
    .collapsing ul li a:hover,
    .in ul li a:hover {
      color: #fff !important;
      background-color: #E1332D;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Navigation --&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header page-scroll"&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;a class="navbar-brand page-scroll" href="#page-top" style="color: white;"&gt;LUCA DELCONTE&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;!-- Hidden li included to remove active class from about link when scrolled up past about section --&gt;
          &lt;li class="hidden"&gt;
            &lt;a class="page-scroll" href="#page-top"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class="page-scroll" href="#about"&gt;&lt;i class="fa fa-smile-o" aria-hidden="true"&gt;&lt;/i&gt; 
      About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class="page-scroll" href="#services"&gt;&lt;i class="fa fa-diamond" aria-hidden="true"&gt;&lt;/i&gt;
       Design&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class="page-scroll" href="#work"&gt;&lt;i class="fa fa-lightbulb-o" aria-hidden="true"&gt;&lt;/i&gt;
       Work&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class="page-scroll" href="#contact"&gt;&lt;i class="fa fa-envelope" aria-hidden="true"&gt;&lt;/i&gt;
       Contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;
    &lt;!-- /.container --&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>