How to synchronize scroll between two elements with different height

Question

I have two DIV elements #page and #block :

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

#block element has fixed position and long content inside with overflow:hidden property.

#page element has some content inside too, but it height of #page will be longer or shorter then #block height.

My goal is to achieve synchronized scroll between this two elements. Something like this:

enter image description here

I need to calculate speed of #block element scroll, because header and footer elements of #page and #block should be at same position from beginning and at the end of scroll.

The way I tried to achieve this:

Calculated height of #page element
Calculated height of #block element content (because block element is fixed and has alwas fixed height)
Calculated #block element scroll speed by:

$("#block").outerHeight / $("#page").outerHeight
Triggered .scrollTop() of #block

It's working from the beginning and #block element scroll is faster then #page element scroll, but at the end, #block is not scrolled fully.

Here is my JsFiddle: http://jsfiddle.net/zur4ik/bQYrf/2/

Maybe anyone can see what I'm doing wrong?

Thanks in advance.

score 10 · Accepted Answer · answered Nov 05 '13 at 10:15

10

You must take the window height into the case and subtract it from the elements heights.

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

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

Here's the updated fiddle: http://jsfiddle.net/bQYrf/4/

answered Nov 05 '13 at 10:15

matewka

9,912
2
32
43

This is exactly what I was missing. Thanks a lot. – zur4ik Nov 05 '13 at 10:30
I am posting this on behalf of [Burak Birer](https://stackoverflow.com/users/6307832/burak-birer) who has posted this comment as an answer; _@matewka it seems i cannot comment yet. The only problem with the example is that when there is few text on one coloumn you simply cannot scroll the long one. Do you think there might be a fix for this situation?_ – Bugs Jun 05 '17 at 15:45

score 3 · Answer 2 · edited May 23 '17 at 12:09

3

I have found two examples of this same question already answered in SO:

If I understand you question correctly this is exactly what you are looking for: Synchronized scrolling using jQuery?

This is also a good solution: How do I synchronize the scroll position of two divs?

edited May 23 '17 at 12:09

Community

1
1

answered Nov 05 '13 at 10:11

usefulcat

339
2
12

score 1 · Answer 3 · answered Nov 05 '13 at 10:14

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/

How to synchronize scroll between two elements with different height

3 Answers3

Here's the updated fiddle: http://jsfiddle.net/bQYrf/4/