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

У меня есть два элемента 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/

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

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

Ответ 1

Вы должны взять window height в регистр и вычесть его из высоты элементов.

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

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

Здесь обновленная скрипка: http://jsfiddle.net/bQYrf/4/

Ответ 2

Я нашел два примера того же вопроса, на которые уже ответил SO:

Если я понимаю, что вы правильно задаете вопрос, это именно то, что вы ищете: Синхронизированная прокрутка с использованием jQuery?

Это также хорошее решение: Как синхронизировать позицию прокрутки двух разделов?

Ответ 3

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()



});

http://jsfiddle.net/PeGky/1/