Come si scorre una colonna a una velocità diversa?

Question

Ho due colonne, #photos e #text. La colonna #photos è più lunga e contiene alcune immagini logicamente. Quando faccio scorrere la pagina, mi piace che la colonna #photos scorra più velocemente della colonna #text, in modo che entrambe le colonne siano allineate nella parte inferiore.

io uso jQuery di $(window).scroll() per aggiornare la colonna #photos:

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

Come faccio a calcolare targetY?

So che probabilmente ha qualcosa a che fare con $(document).height(), $("#photos").height() e $(window).scrollTop(), ma non riesco a capire la formula.

Answer 1

Senza un po 'più di codice da guardare, non posso davvero suggerire modifiche da apportare direttamente al tuo codice, ma sono riuscito a prendere in giro una versione funzionante di quello che stai cercando con il seguente jsFiddle.

Ho anche suddiviso l'equazione in parti per rendere più facile vedere cosa sta succedendo.

Così come si scorre il div text, gli scroll photos div allo stesso rapporto a seconda dell'altezza dei due contenitori.

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> 

Speranza che aiuta a risolvere il problema.