title: Parallax effect - calculate child offset to parent on scroll
body: <p>I'm trying to create a parallax effect whereby an absolutely positioned child element should move at a rate slower than it's parent on scroll.</p>
  
  <p>The child will always be 130% height of the parent but the parent can be any height:</p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parallax-window lg"&gt;
    &lt;div class="parallax-image image-1"&gt;&lt;/div&gt;
    &lt;div class="parallax-content"&gt;Hello World&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="parallax-window"&gt;
    &lt;div class="parallax-image image-2"&gt;&lt;/div&gt;
    &lt;div class="parallax-content"&gt;Hello World&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parallax-window {
    min-height: 300px;
    position: relative;
    overflow: hidden;
  }
  
  .parallax-window.lg {
    min-height: 600px;
  }
  
  .parallax-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transform: translate3d(0, 0, 0);
    z-index: -1;
   }
  
  .image-1 {
    background-image: url(https://i.ytimg.com/vi/TbC-vUPMR7k/maxresdefault.jpg);
  }
  
  .image-2 {
    background-image: url(https://i.ytimg.com/vi/xi5-YrAEChc/maxresdefault.jpg);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a formula to move the image but my maths is clearly way off:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var win = $(window),
          win_h = win.height(),
          parallaxers = $('.parallax-window');
  
      function scroll_events() {
          var win_top = win.scrollTop(),
              win_btm = win_top + win_h;
      
          parallaxers.each(function() {
              var cont = $(this),
                  cont_top = cont.offset().top,
                  cont_h = cont.height(),
                  cont_btm = cont_top + cont_h,
                  para = cont.find('.parallax-image'),
                  para_h = Math.round(cont_h * 1.3);
              if (cont_btm &gt; win_top &amp;&amp; cont_top &lt;= win_btm) {
                  var diff = (win_h - cont_h) / (win_h - para_h),
                      value = -Math.round((win_top * diff));
                  // para.css('transform', 'translate3d(0,' + value*-1 + 'px, 0)');
                  para.css('top', value + 'px');
              }
          });
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The images move but not at the correct rate.</p>
  
  <p>The image should be in line with the top of the parent when the element first comes into the viewport. Then after scrolling, the bottom of the image should be in line with the bottom of the parent when it reaches the top of the viewport.</p>
  
  <p>Any help would be massively appreciated!</p>
  
  <p>FIDDLE (<a href="https://jsfiddle.net/8dwLwgy7/1/" rel="nofollow">https://jsfiddle.net/8dwLwgy7/1/</a>)</p>