jQuery - 垂直スクロールでオブジェクトを水平に移動

Question

これはプログラミングよりも数学的な問題です。

ドキュメントをスクロールしているときにブラウザウィンドウの左端から右端に向かってオブジェクトを水平方向に移動したいとします。

スクロール位置が "0"の場合はオブジェクトがウィンドウの左端に移​​動し、スクロール位置が "文書の最後まで下がる"とすると、オブジェクトはウィンドウの右端に移動するはずです。

私はこれを試みたが、失敗しました：

var window_width = $(window).width(); 

$(window).scroll(function() { 
    var scroll_position = $(window).scrollTop(); 
    var object_position_left = scroll_position*(scroll_position/window_width); 

    $('#object').css({'left':object_position_left}); 
}); 

http://jsfiddle.net/BA5p4/

Answer 1

あなただけ（window_heightによりに基づいて）左にオブジェクトを移動する必要がありjsFiddle

var window_width = $(window).width() - $('#object').width(); 

var document_height = $(document).height() - $(window).height(); 

$(function() { 
    $(window).scroll(function() { 
     var scroll_position = $(window).scrollTop(); 
     var object_position_left = window_width * (scroll_position/document_height); 
     $('#object').css({ 
      'left': object_position_left 
     }); 
    }); 
}); 

でデモを参照してください何でもしてあなたがスクロールしたパーセント（document_heightに基づいて）。

ウィンドウの幅と高さは、オブジェクトがウィンドウ外に出ないように調整されています。

ウィンドウのサイズ変更でこれらの変数を再計算する必要がある場合があります。