title: How to change navbar background color after page has scrolled down
body: <p>I have a fixed navbar on a bootstrap project and on the landing page of the website, I have made the background of the navbar transparent. When the website scrolls down, I want the navbar background to change back to black. I am using bootstrap. An example of what I want can be seen in the nabber at : </p>
  
  <p><a href="http://ironsummitmedia.github.io/startbootstrap-agency/" rel="nofollow">http://ironsummitmedia.github.io/startbootstrap-agency/</a></p>
  
  <p>I am a new coder, so I apologize for any mistakes in the code formatting.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
      &lt;title&gt;Youth  |  Society&lt;/title&gt;
      &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="design.css" rel="stylesheet"&gt;
  
      &lt;link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'&gt;
      &lt;/head&gt;
  
  
  &lt;body&gt;
      &lt;header&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
  
            &lt;a href="#" class="navbar-brand"&gt;&lt;img src="1.png"&gt;&lt;/a&gt;
            &lt;/div&gt;
  
  
            &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"&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;div class="collapse navbar-collapse navHeaderCollapse"&gt;
  
                &lt;ul class="nav navbar-nav navbar-right"&gt;
  
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Who are we&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Volunteer&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
            &lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;
          &lt;/header&gt;
  
  
      &lt;div class="page1"&gt; 
      &lt;div class="landing"&gt;
        &lt;div class="container"&gt;
          &lt;h1&gt;Peel's YES&lt;/h1&gt;
          &lt;p&gt;Welcome To Peel's Youth Engagement Society&lt;/p&gt;
        &lt;/div&gt;
  &lt;div class="topics"&gt;
        &lt;div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-4"&gt;
              &lt;h3&gt;Learn&lt;/h3&gt;
              &lt;p&gt;Get to know more about YES, who we are, and what we do.&lt;/p&gt;
  
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;h3&gt;Volunteer&lt;/h3&gt;
              &lt;p&gt;Find out how you can get involved! YES strives to prove YOUth with unique opportunities and experiences.&lt;/p&gt;
  
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;h3&gt;Educate&lt;/h3&gt;
              &lt;p&gt;Read about the themes that YES has supported in the past&lt;/p&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/DOCTYPE&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar-header {
      display: inline;
  }
  
  .navbar{
      background: transparent;
      background-color: transparent;
      border-color: transparent;
  }
  
  @media screen and (max-width: 767px) {
      .navbar {
          background-color: black;
  
      }
  }
  
  
  .navbar-toggle{
      margin-top: -50px;
  
  
  }
  
  .navbar .nav &gt; li &gt; a {
      color:  black;
  }
  
  @media screen and (max-width: 767px) {
      .navbar .nav &gt; li &gt; a {
          color:white;
  
      }
  }
  .navbar {
  
      padding-top:15px;
      padding-bottom: 5px;
  
  }
  
  @media screen and (max-width: 767px) {
      .navbar {
          padding-top:0px;
          padding-bottom: 0px;
  
      }
  }
  
  .navbar a {
  
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;  
  }
  
  .navbar li{
  
      font-family: 'Lato', sans-serif;
      display: inline;
  
  }
  
  .navbar img {
      max-height: 50px;
      margin-top: -20px;
  
  }
  
  
  /*      P A G E  1      */
  
  
  
  
  .landing {
      padding-top:140px;
      background-image:url(mainpage1.JPG);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 760px;
  }
  
  .landing h1 {
      text-align: center;
    color: #000;
    font-size: 70px;  
    font-family: 'Lato', sans-serif;
    font-weight: bold;
  }
  
  .landing p {
      text-align: center;
    font-size: 20px;
    color: #000;
      font-family: 'Lato', sans-serif;
  }
  .topics{
  
      background: #eeeeee;
      padding-right:40px;
      margin-top: 340px;
      text-align: center;
  }
  
  .topics h3{
      font-size: 18px;
  }
  
  .topics p{
      font-size: 18px;
  }
  
  
  /*      P A G E  2      */
  
  
  .page2 {
      height:760px;
  
  }
  
  .page2 h3{
      text-align: left;
      margin-top: 100px;
  
  }
  </code></pre>