Jak przewinąć kolumnę przy innej prędkości?

Question

Mam dwie kolumny, #photos i #text. Moja kolumna #photos jest dłuższa i zawiera pewne obrazy. Kiedy przewijam stronę, podoba mi się kolumna #photos, aby przewijać szybciej niż kolumna #text, tak aby obie kolumny były wyrównane na dole.

używam jQuery na $(window).scroll() zaktualizować kolumnę #photos:

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

Jak obliczyć targetY?

Wiem, że prawdopodobnie ma to coś wspólnego z $(document).height(), $("#photos").height() i $(window).scrollTop(), ale nie mogę wymyślić formuły.

Answer 1

Bez nieco więcej kodu, nie mogę zasugerować zmian, aby przejść bezpośrednio do kodu, ale udało mi się wykpić działającą wersję tego, co być może szukasz z następującym jsFiddle.

Rozbiłem również równanie na części, aby łatwiej było zobaczyć, co się dzieje.

Tak jak przewijasz element text div, element div jest przesuwany w tym samym współczynniku w zależności od wysokości dwóch kontenerów.

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> 

Nadzieja to pomaga rozwiązać problem.