SO navbar shadow

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src=" http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<div class="navbar" data-spy="affix">
<div class="navbar-inner">
  <ul class="nav">
    <li><a href="#">home</a></li>
    <li class="active"><a href="#">what we do</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
  </ul>
  </div>
  </div>
<div id="top-shadow"></div>
    
   <div class="content"> 
   <p> <br clear="all">
       <h3> Scroll to activate shadow on menu bar </h3>
       
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis felis in magna lacinia bibendum. Vivamus elit mauris, tristique at hendrerit viverra, rhoncus eleifend justo. Duis ultrices aliquet magna adipiscing consequat. Phasellus ac tellus quis nulla sollicitudin rhoncus. In pretium scelerisque mauris et molestie. Nullam in ligula nulla. Etiam convallis orci ac sapien scelerisque id vulputate lorem consectetur. Maecenas quam mi, viverra placerat iaculis viverra, accumsan in turpis. Vivamus feugiat, dolor quis accumsan lacinia, nibh velit pulvinar dolor, eget semper urna leo eget tellus. Sed at nulla erat, eget convallis nisl. Maecenas eget orci a lacus auctor aliquet in sit amet magna. Aliquam erat volutpat. Donec erat massa, sollicitudin sed pharetra nec, malesuada quis risus.</p><p>

Duis ut libero orci. Nulla ultricies ultrices velit a suscipit. Morbi ac ipsum nunc, quis feugiat enim. Nullam pharetra magna elementum orci hendrerit interdum. Sed dignissim mattis tincidunt. Nullam rhoncus sagittis leo, sit amet viverra metus cursus at. Fusce viverra nisi eget nunc semper tempus. Phasellus nisi sapien, vulputate et bibendum vel, eleifend nec nunc. Donec laoreet ante mollis dolor posuere...

CSS

#top-shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 42px;
    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;
}
.navbar{
    z-index:1000; /* lift .navbar above #top-shadow */
}
.navbar.affix{ /* position fixed navbar */
    top:0; 
    width:100%;
}

.content{margin-top:50px; /* top margin so content clears navbar */
}

body{min-height:1000px;} /* min height so you can always scroll */

JavaScript

$(document).ready(function(){
 $(window).scroll(function(){
  var y = $(window).scrollTop();
  if( y > 0 ){
      $("#top-shadow").css({'display':'block', 'opacity':y/20});
  } else {
      $("#top-shadow").css({'display':'block', 'opacity':(y+20)/20});
  }
 });
})