title: jQuery Animate translateY Based On Scroll Percentage
body: <p>I'm trying to build a simple overlapping "parallax" effect without any plugins.  I have html like:</p>
  
  <pre><code>&lt;section&gt;
      &lt;h2&gt;Example Text&lt;/h2&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;h2&gt;Example Text&lt;/h2&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;h2&gt;Example Text&lt;/h2&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;h2&gt;Example Text&lt;/h2&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;h2&gt;Example Text&lt;/h2&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Each section has a height of 100% of the viewport.  I'm using an each loop inside <code>$(window).scroll()</code>.  I need to animate the <code>transform: translateY()</code> property of the top section until the following section is at the top of the browser.  This percentage essentially needs to be based on the percetange from the top of the browser. I've tried a number of things involving getting the <code>offset().top</code>, and <code>height()</code> values, and comparing them to <code>$(window).scrollTop()</code> but I can't seem to work it out.  This is the effect I'm trying to achieve, though its using a jQuery plugin.</p>
  
  <p><a href="http://codepen.io/rocbear/pen/bdIaG" rel="nofollow">http://codepen.io/rocbear/pen/bdIaG</a></p>
  
  <p><strong>Edit</strong>
  I have this almost worked out now, but I have one small issue scroll back to the top.  The <code>translate</code> property doesn't go all the way back to 0% and leaves a gap at the top.</p>
  
  <p>My codepen: <a href="http://codepen.io/mdmoore/pen/MwjoLZ" rel="nofollow">http://codepen.io/mdmoore/pen/MwjoLZ</a></p>
  
  <pre><code>$(function(){
    $('section').each(function() {
      var off = $(this).offset().top
      $(this).data('orig-offset', off);
    });
    $(window).scroll(function(){
      var scrollTop = $(window).scrollTop();
  
      $('section').each(function(){
        var off = $(this).data('orig-offset');
        var translate =  (scrollTop - off) / $(window).height() * 100;
        if (scrollTop &gt;= off) {
          $(this).css({transform: 'translateY(' + translate +'%)'});
        }
      });
    });
  });
  </code></pre>