title: how to make a transparent navbar visible when scrolling
body: <p><a href="http://www.lyft.com/" rel="noreferrer">Something like this website</a></p>
  
  <p>This is what I am trying to achieve:</p>
  
  <ol>
  <li>The navbar is transparent on top of the page and </li>
  <li>On scrolling it goes from transparent to taking specific color.</li>
  </ol>
  
  <p>I have done a lot of research on this but nothing helped. I have tried affix plugin and jQuery but found them to be very confusing. I am new to jQuery and find it a little difficult to understand and implement :( </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    margin:0; 
    padding:0;
  }
  
  body {
    position:relative;
    height:200px;
  }
  
  .nav {
    margin:0px; 
  }
  
  .navbar{
    background:transparent;
    background-color:transparent;
    border-color:transparent;
    margin-bottom:0px;
    font-family: 'Droid Serif', serif;
    font-size:20px;
  }
  
  .navbar-brand {
    font-size:20px;
    font-family: 'Droid Serif', serif;
  }
  
  header {
    text-align: center;
    color: #fff;
    background-attachment: scroll;
    background-image: url("work.jpg");
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
  }
  
  header .intro-text {
    padding-top: 100px;
    padding-bottom: 50px;
  }
  
  header .intro-text .intro-heading {
    margin-bottom: 25px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 50px;
  }
  
  @media(min-width:768px) {
    header .intro-text {
      padding-top: 300px;
      padding-bottom: 200px;
    }
  
    header .intro-text .intro-heading {
      margin-bottom: 50px;
      text-transform: uppercase;
      font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 75px;
      font-weight: 700;
      line-height: 75px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" &gt;
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" &gt;
      &lt;!-- Custom CSS --&gt;
      &lt;link href="css.css" rel="stylesheet" type='text/css'&gt;
      &lt;!--font family--&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'&gt;
    &lt;/head&gt;
    &lt;body data-spy="scroll" data-target=".navbar" data-offset="50"&gt; 
      &lt;!--Navigation--&gt;  
      &lt;nav class="navbar navbar-inverse  navbar-fixed-top" &gt;
        &lt;div class="conatiner-fluid"&gt;
          &lt;!--page scroll button for --&gt;
          &lt;div class="navbar-header" role="navigation"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar"&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;Website&lt;/a&gt;
          &lt;/div&gt; &lt;!--page scroll button--&gt;
          &lt;div&gt;
            &lt;div class="collapse navbar-collapse" id="myNavbar"&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="#about"&gt;About&lt;/a&gt;&lt;/li&gt; 
                &lt;li &gt;&lt;a href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
                &lt;li &gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt; &lt;!--ul-li--&gt;
          &lt;/div&gt; &lt;!--navbar collapse--&gt;
        &lt;/div&gt; &lt;!--container-fluid--&gt;
      &lt;/nav&gt;
      &lt;!--Navigation--&gt;
      &lt;!--Header--&gt;
      &lt;header&gt;
        &lt;div class="container" &gt;
          &lt;div class="intro-text"&gt;
            &lt;!--&lt;div class="intro-lead-in"&gt;Welcome To Our Studio!&lt;/div&gt;--&gt;
            &lt;div class="intro-heading"&gt;You have landed our page!&lt;/div&gt;
            &lt;a href="#services" class="page-scroll btn btn-xl"&gt;Tell Me More&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/header&gt;
      &lt;!--Header--&gt;
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" &gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>