title: Hide div after scrolling it out of viewport, but maintain scroll position
body: <p>I have a full screen box (#doorMat) that pops in to view on page load. The box has both a link to click to close it (works great), as well I'm trying to make a function to remove it if the user scrolls down the page past it. I'd like the doorMat div to be removed/detached but not have the screen adjust with it.</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>var height = $(window).height();
  
  $(window).scroll(function() {
  var scroll = $(window).scrollTop();
  
  if ( scroll &gt; height ) {
      hideDoorMat();
  }
  });
  
  function hideDoorMat() {
  if($('#doorMat').length){
  var scroll = $(window).scrollTop();
  $('#doorMat').remove();
  $('body').animate({
      scrollTop: $("#content").offset().top
  });
  }
  }
  </code></pre>
  
  <p>It works, sort of, except when I scroll past the doorMat, the content still shifts up, as well as there being a delay on the scroll back to content. Can anyone tell me where I went wrong?</p>