如何以不同的速度滾動列？

Question

我有兩列，#photos和#text。我的#photos列較長，邏輯上保留一些圖像。當我滾動頁面時，我喜歡#photos列的滾動速度比#text列快，因此兩列都在底部對齊。

我使用jQuery的$(window).scroll()更新#photos柱：

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

如何計算targetY？

我知道它可能與$(document).height(),$("#photos").height()和$(window).scrollTop()有關，但我無法弄清楚公式。

Answer 1

沒有更多的代碼可以看，我不能真正建議直接對你的代碼進行修改，但我已經設法模擬了你可能在尋找的工作版本，其中包括以下jsFiddle。

我也已將方程式細分爲多個部分，以便更容易地看到發生了什麼。

因此，當您滾動text div時，photos div將以相同的比率滾動，具體取決於兩個容器的高度。

的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> 

希望它可以幫助您解決問題。