¿Cómo desplazo una columna a una velocidad diferente?

Question

Tengo dos columnas, #photos y #text. Mi columna #photos es más larga y contiene lógicamente algunas imágenes. Cuando me desplazo por la página, me gusta la columna #photos para desplazarme más rápido que la columna #text, de modo que ambas columnas se alineen en la parte inferior.

utilizo jQuery de $(window).scroll() para actualizar la columna #photos:

$("#photos").css("top", Math.round(targetY)); 

¿Cómo calculo targetY?

Sé que probablemente tiene algo que ver con $(document).height(), $("#photos").height() y $(window).scrollTop(), pero no puedo entender la fórmula.

Answer 1

Sin un poco más de código para mirar, realmente no puedo sugerir cambios para hacer directamente a su código, pero he logrado simular una versión funcional de lo que está buscando con el siguiente jsFiddle.

También he dividido la ecuación en partes para que sea más fácil ver lo que está pasando.

De modo que al desplazarse por el div text, el div photos se desplaza en la misma proporción dependiendo de la altura de los dos contenedores.

JavaScript:

$(document).ready(function(){ 
    $('#textScroll').scroll(function(){ 
     var textDiff = $('#text').height() - $('#textScroll').height(); 
     var textDiffRatio = (1/textDiff) * $('#textScroll').scrollTop(); 
     var photosDiff = $('#photos').height() - $('#photosScroll').height(); 
     var photosScrollTop = textDiffRatio * photosDiff; 
     $('#photosScroll').scrollTop(photosScrollTop); 
    }); 
}); 

HTML:

<div id="textScroll" style="width:100px; height:100px; overflow:auto;"> 
    <div id="text"> 
     Text 1<br /> 
     Text 2<br /> 
     Text 3<br /> 
     Text 4<br /> 
     Text 5<br /> 
     Text 6<br /> 
     Text 7 
    </div> 
</div> 
<div id="photosScroll" style="width:100px; height:100px; overflow:auto;">  
    <div id="photos"> 
     Photos 1<br /> 
     Photos 1<br /> 
     Photos 2<br /> 
     Photos 2<br /> 
     Photos 3<br /> 
     Photos 3<br /> 
     Photos 4<br /> 
     Photos 4<br /> 
     Photos 5<br /> 
     Photos 5<br /> 
     Photos 6<br /> 
     Photos 6<br /> 
     Photos 7<br /> 
     Photos 7 
    </div> 
</div> 

espero que ayude a resolver su problema.