SO release fixed header on scroll

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="header" data-spy="affix">
    affixed header, released after scrolling 100px
</div>

    
   <div class="content"> 
   <p> 
       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 ullamcorper ut id sapien. In sapien eros, sodales eget venenatis pellentesque, volutpat id arcu. Proin laoreet ornare tincidunt. Morbi quis rutrum odio. Pellentesque non leo ut orci mollis posuere tristique sit amet turpis. Vestibulum vestibulum dui vel nisl imperdiet eu pretium nulla fermentum. Nunc tortor tortor, malesuada...

CSS

.header{
    height:150px;
    background-color:#aaa;
    margin-bottom:-150px; /* pull content up when header is released */
}
.header.affix{ 
    top:200px; 
    width:100%;
}

.content{margin-top:150px;
}

JavaScript

$(document).ready(function(){
 $(window).scroll(function(){
  var y = $(window).scrollTop();
  if( y > 100 ){
      $(".header.affix").css({'position':'static'});
  } else {
      $(".header.affix").css({'position':'fixed'});
  }
 });
})