title: How to synchronize scroll between two elements with different height
body: <p>I have two DIV elements <code>#page</code> and <code>#block</code> :</p>
  
  <pre><code>&lt;div id="page"&gt;&lt;/div&gt;
  &lt;div id="block"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><code>#block</code> element has fixed position and long content inside with <code>overflow:hidden</code> property.</p>
  
  <p><code>#page</code> element has some content inside too, but it height of <code>#page</code> will be longer or shorter then <code>#block</code> height.</p>
  
  <p>My goal is to achieve synchronized scroll between this two elements. Something like this: </p>
  
  <p><img src="https://i.stack.imgur.com/51zdM.gif" alt="enter image description here"></p>
  
  <p>I need to calculate speed of <code>#block</code> element scroll, because header and footer elements of <code>#page</code> and <code>#block</code> should be at same position from beginning and at the end of scroll.</p>
  
  <p><strong>The way I tried to achieve this:</strong></p>
  
  <ul>
  <li>Calculated height of <code>#page</code> element</li>
  <li>Calculated height of <code>#block</code> element content (because block element is fixed and has alwas fixed height)</li>
  <li><p>Calculated <code>#block</code> element scroll speed by: </p>
  
  <p><code>$("#block").outerHeight / $("#page").outerHeight</code></p></li>
  <li><p>Triggered <code>.scrollTop()</code> of <code>#block</code> </p></li>
  </ul>
  
  <p>It's working from the beginning and <code>#block</code> element scroll is faster then <code>#page</code> element scroll, but at the end, <code>#block</code> is not scrolled fully.</p>
  
  <p>Here is my JsFiddle: <a href="http://jsfiddle.net/zur4ik/bQYrf/2/" rel="noreferrer">http://jsfiddle.net/zur4ik/bQYrf/2/</a></p>
  
  <p>Maybe anyone can see what I'm doing wrong?</p>
  
  <p>Thanks in advance.</p>