title: Why are two vertical scrollbars showing?
body: <p>I did something like this to initially hide the body scrollbar, and then show it when a link is clicked:</p>
  
  <pre><code>$('body').css('overflow', 'hidden');
  $('#site').click(function(e) {
      $('#wrapper').remove();
      $('body').css('overflow', 'scroll');
      return false;
  });
  </code></pre>
  
  <p>At first, it does hide the scrollbar and just shows a scrollbar for the overlay (absolutely positioned div (#wrapper)) but when I click on the link (#site) to show the scrollbar again (and remove the overlay), it now shows two scrollbars: one is working, the other is disabled.</p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;div id="wrapper"&gt;
     --- some content ----
     &lt;a href="" id="site"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
     --- rest of the website ---
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS:</h3>
  
  <pre><code>#wrapper {  
      background-color: #CCC;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99999; 
      height: 800px;
  }
  </code></pre>
  
  <p>What has gone wrong?</p>