title: Empty space below content using Parallax scrolling
body: <p>I'm using Parallax scrolling for my new site but I have found there's loads of empty space after the content has been scrolled past. It scrolls past the bottom of the content and there's nothing there.</p>
  
  <p>I assume this is because the script is speeding up scrolling, since when I remove the Parallax effect the content stops at the bottom of the browser window like its supposed to.</p>
  
  <p>jQuery:</p>
  
  <pre><code>    $(document).ready(function() {
      /* Scroll event handler */
      $(window).bind('scroll',function(e){
          parallaxScroll();
      });
  });
  
  /* Scroll the background layers */
  function parallaxScroll(){
      var scrolled = $(window).scrollTop();
      $('#Body_Background').css('top',(0-(scrolled*.3))+'px');
      $('#Home_WelcomeMessage').css('top',(0-(scrolled*.305))+'px');
      $('#Home_ContentBox2').css('top',(0-(scrolled*.605))+'px');
      $('#Home_ContentBox3').css('top',(0-(scrolled*.995))+'px');
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#Body_Background { z-index: 3; position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
  #Body_Wrapper { position: relative; padding: 0; margin: 0; }
  #Home_ContentBox1 { z-index: 5; position: relative; width: 100%; height: 950px; left: 0px; margin-top: 800px; padding: 0px; }
  #Home_WelcomeMessage { z-index: 4; position: fixed; width: 100%; height: 400px; top: 0; margin-top: 400px; }
  #Home_ContentBox2 { z-index: 5; position: relative; width: 100%; height: 800px; left: 0px; margin-top: 100px; padding: 0px; }
  #Home_ContentBox3 { z-index: 5; position: relative; width: 100%; height: 1000px; left: 0px; margin-top: 0px;  padding: 0px; }
  </code></pre>
  
  <p>Any help is most appreciated :)</p>