異なる速度で列をスクロールするにはどうすればよいですか？

Question

私は2つのカラム、#photosと#textを持っています。私の#photos列が長くなり、いくつかのイメージが論理的に保持されます。私がページをスクロールすると、#photos列が#text列よりも速くスクロールして両方の列が一番下に並ぶようになります。私はtargetYを計算するにはどうすればよい

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

：

私は #photos列を更新するためにjQueryの $(window).scroll()を使うのか？

おそらく$(document).height()、$("#photos").height()、$(window).scrollTop()と関係がありますが、私はその式を理解できません。

Answer 1

もう少しコードを表示する必要はありませんが、実際にはコードに直接変更するよう提案することはできませんが、おそらく次のようなコードで作業しているバージョンを試してみました。jsFiddle

私はまた、何が起こっているのかを見やすくするために、方程式を部品に分解しました。

text divをスクロールすると、photos divは2つのコンテナの高さに応じて同じ比率でスクロールします。

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

は、それはあなたがあなたの問題を解決するのに役立ちます願っています。