如何同步具有不同高度的两个元素之间的滚动

我有两个DIV元素#page和#block：

<div id="page"></div>
<div id="block"></div>

#block元素具有固定的位置，并且内部具有内容丰富的内容overflow:hidden。

#page元素内部也有一些内容，但是它的高度#page将比高度更长或更短#block。

我的目标是实现这两个元素之间的同步滚动。像这样的东西：

我需要计算的速度#block元件滚动，由于页眉和页脚元素#page和#block应在相同的位置从开始并在涡管的端部。

我尝试实现此目的的方式：

• 计算的#page元素高度
• 计算出的#block元素含量的高度（因为块元素是固定的并且一直具有固定的高度）

• 计算#block元素滚动速度：

  $("#block").outerHeight / $("#page").outerHeight

• 触发.scrollTop()的#block

它从一开始就起作用，并且#block元素滚动比元素滚动要快#page，但是到最后，元素滚动#block还没有完全滚动。

这是我的JsFiddle：http : //jsfiddle.net/zur4ik/bQYrf/2/

也许有人可以看到我在做什么错？

提前致谢。