У меня есть два элемента 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/
Может кто-нибудь может понять, что я делаю неправильно?
Спасибо заранее.