title: Twitter bootstrap navbar shadow on scroll
body: <p>I'm look to do the following 
  <a href="http://codepen.io/anon/pen/eIfdn" rel="noreferrer">http://codepen.io/anon/pen/eIfdn</a>
  for the Twitter bootstrap navbar. 
  It simply adds a shadow to the navbar upon scrolling. Any advice would be helpful thank you. </p>
  
  <pre><code>.navbar {
  *position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 999;
  -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
  display: none;
  *z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  }
  </code></pre>
  
  <p>Thats the css I changed and I added in the js from above. </p>
  
  <p>Here's the JS I used </p>
  
  <pre><code>$(document).ready(function(){
   $(window).scroll(function(){
    var y = $(window).scrollTop();
    if( y &gt; 0 ){
    $("#navbar").css({'display':'block', 'opacity':y/20});
    } else {
    $("#navbar").css({'display':'block', 'opacity':y/20});
    }
   });
  })
  </code></pre>