Sincronizar scroll de dos divs con JavaScript

En caso de que tengas dos divs de distinto tamaño puede que en ocasiones quieras que al hacer scroll ambos lo hagan a la vez pero a distinta velocidad dependiendo de su tamaño. Por ejemplo, podrías tener texto en uno e imágenes en otro y querer que al llegar al final ambos lo hagan a la vez. Para lograrlo, lo haremos con la librería jQuery de JavaScript. Si no sabes cómo utilizar jQuery, consulta primero el tutorial de introducción a jQuery.

Para sincronizar las posiciones de scroll podemos utilizar .scrollTop() para saber la posición del contenido con respecto a la parte superior de la página.

Primero colocamos el div pagina con el contenido principal y luego el div bloque con el contenido secundario que hará scroll con respecto al principal según su posición. Este segundo div tendrá que tener un a posición fija respecto a la página. Es decir, que en su CSS deberá contener el artributo «position: fixed».

<div id="pagina">
  <p class="cabeceraPagina">CABECERA PAGINA</p>
  <p>Aquí un texto largo</p>
  .........
  <p>Aquí más párrafos</p>
  <p> class="piePagina">PIE PAGINA</p>
</div>

<div id="bloque">
  <div id="alturaBloque">
    <p class="cabeceraBloque">CABECERA BLOQUE</p>
    <p>Aquí un texto largo</p>
    .........
    <p>Aquí más párrafos</p>
    <p class="pieBloque">PIE BLOQUE</p>
  </div>
</div>

Vamos ahora con el código JavaScript. En pageH obtenemos la diferencia entre la altura del div pagina y la altura de la ventana para calcular la altura del contenido no visible. En pagT obtenemos la posición de scroll de la ventana menos la altura que ya hemos avanzado en el div pagina. Finalmente movemos el div bloque lo correspondiente con respecto al div pagina para que se muevan la misma distancia proporcional en base a su altura.

$(window).scroll(function() {
    var pagH = $('#pagina').height() - $(this).height();
    var pagT = this.scrollY - $('#pagina').offset().top;
    $('#bloque').scrollTop(pagT / pagH * ($('#alturaBloque').height() - $(this).height()));
});

Los estilos de los divs son los siguientes:

body {
  position: relative;
  margin: 0 auto;
}

#pagina {
  position:relative;
  width: 550px;
}

#pagina p {
  text-align: justify;
}

#bloque {
  background: #027EBA;
  display: block;
  width: 200px;
  height: 100%;
  position: fixed;
  right: 20px;
  top:0;
  overflow: hidden;
}

.cabeceraPagina, .piePagina {
  display: block;
  width: 100%;
  margin: 0 auto;
  background: red;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.cabeceraBloque, .pieBloque {
  display: block;
  width: 100%;
  margin: 0 auto;
  background: green;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

Es importante que no nos olvidemos de agregar jQuery. Aquí os dejo el enlace al fiddle con el código funcionando.

---