Как синхронизировать прокрутку между двумя элементами с разной высотой

У меня есть два элемента 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() of #block

Работает с начала и #block прокрутка элемента быстрее, чем #page прокрутка элемента, но в конце #block не прокручивается полностью.

Вот мой JsFiddle: http://jsfiddle.net/zur4ik/bQYrf/2/

Может кто-нибудь может понять, что я делаю неправильно?

Спасибо заранее.

Ответы

$(window).scroll(function() {
    var pageH = $('#page').height() - $(this).height();
    var pageT = this.scrollY - $('#page').offset().top;

    $('#block').scrollTop(pageT / pageH * ($('#blockLength').height() - $(this).height()));
});

function getClientHeight()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

var clientHeight = getClientHeight();

$(window).scroll(function() {

    var diff = ($("#blockLength").height() - clientHeight) / ($("#page").height() - clientHeight);
    var blocktoSet = $(window).scrollTop() * diff;

    $("#block").scrollTop(blocktoSet);

    console.log()



});