<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
  $(document).ready(function() {
  var easing_type = 'easeOutBounce';
  var default_dock_height = '40';
  var expanded_dock_height = $('#dock').height();
  var body_height = $(window).height() - default_dock_height;
  $('#fake-body').height(body_height);
  $('#dock').css({'height': default_dock_height, 'position':'absolute', 'top': body_height});
  $(window).resize(function () {
  updated_height = $(window).height() - default_dock_height;
  $('#fake-body').height(updated_height);  
  $('#dock').css({'top': updated_height});
  });
  $('#dock').mouseover(function () {
  expanded_height = $(window).height() - expanded_dock_height;
  $(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type});
  }).mouseout(function () {
  body_height = $(window).height() - default_dock_height;
  $(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type});
  });
  });
  </script>

<style>
   
  body {
  margin:0;  
  padding:0
  }
#fake-body {
  overflow:auto;
  z-index:1;
  }
#dock {
  background:#ccc url(bg.gif) repeat-x;
  height:200px;
  z-index:100;
  width:100%;
  }
</style>

<div id="fake-body">
  <!-- Put your entire website in this section -->
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  </div>  
<div id="dock">
  <!-- Put your dock in this section -->
  </div>