title: Scrolling div issue
body: <p>I'm trying to solve a problem with scrolling on website. Take a look at this 
  <a href="http://www.firstscribe.com/" rel="nofollow">site</a>.
  Scrolling down causes to slide up the "hidden" part of site. I wanna achieve the same effect, and it needs to be smooth sliding as well. I've tried to use scrollTop() and animate() but it doesn't work. I'm using JQuery. Let me post my code, here it is:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /&gt;
      &lt;link href="stylin.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
           $(function(){
              $(".button").toggle(function(){
                  $("#blocks").animate({top: 200}, 500 );
              },
              function(){ 
                  $("#blocks").animate({top: 760}, 500 );
              });
          });
      &lt;/script&gt;
   &lt;script type="text/javascript"&gt;
   $(document).ready( function() {
       $(document).scroll( function() {
       $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
  
      });
  });
  &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="main"&gt;
          &lt;div id="photo"&gt;
          &lt;/div&gt;
          &lt;div id="blocks"&gt;
              &lt;div id="button_block"&gt;
                  &lt;a href="#" class="button" &gt;&lt;img src="scrollup.png" /&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    #main {
      width: 1500px; 
      position:absolute;
  
  }
  
  #photo{
      position:fixed;
      top:0;
      width:1500px;
      height:780px;
      background-color:blue;
      z-index:0;
  
  }
  
  #blocks{
      position:absolute;
      top: 760px;
      width: 100%;
      height: 1000px;
      background-color: red;
      z-index:1;
  }
  
  #button_block{
      position:absolute;
      width:100%;
      height:64px;
      top:-32px;
  }
  
  .button
  {
      display:block;
      position: absolute;
      right: 686px;
  }
  </code></pre>
  
  <p>Div <strong>blocks</strong> should be the one sliding up while scrolling.</p>
  
  <p>Look at this part:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
       $(document).ready( function() {
           $(document).scroll( function() {
           $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
  
          });
      });
      &lt;/script&gt;
  </code></pre>