title: How to slide down div AND its contents after scrolling
body: <p>(read carefully twitchy trigger finger downvoters)</p>
  
  <p>I am trying to get a div AND its contents to slide down after scrolling to a certain point. I have looked extensively, but I have only been able to locate how to slide down the div, however its contents are static. In other words, the div slides down to reveal its contents, but its contents do NOT slide. </p>
  
  <p>Here is the JsFiddle is used...</p>
  
  <p><a href="http://jsfiddle.net/BinaryMuse/Ehney/1/" rel="nofollow noreferrer">http://jsfiddle.net/BinaryMuse/Ehney/1/</a></p>
  
  <p>CSS...</p>
  
  <pre><code>body {
      height: 10000px;
  }
  
  .fixedDiv {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
  }
  
  header {
      height: 300px;
      border: 1px solid black;
  }
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>// Get the headers position from the top of the page, plus its own height
  var startY = 500;
  
  $(window).scroll(function(){
      checkY();
  });
  
  function checkY(){
      if( $(window).scrollTop() &gt; startY ){
          $('.fixedDiv').slideDown();
      }else{
          $('.fixedDiv').slideUp();
      }
  }
  
  // Do this on load just in case the user starts half way down the page
  checkY();
  </code></pre>
  
  <p>As you can see, the content of the div does not move. Only the div itself. I need the content to MOVE down WITH the div, NOT to only be revealed by a moving div.</p>