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

Смотрите демо в 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 
     }); 
    }); 
}); 

Вам просто нужно, чтобы переместить объект влево (на основе window_width) с любым процент, который вы прокрутили вниз (на основе document_height).

Ширина окна и высота документа регулируются таким образом, чтобы предотвратить выход объекта за пределы окна.

Возможно, вам придется пересчитать эти переменные при переустановке окна.