jQuery - sposta l'oggetto orizzontalmente sullo scorrimento verticale

Question

Questa è più una questione matematica che di programmazione.

Desidero spostare un oggetto orizzontalmente, dal bordo sinistro a quello destro della finestra del browser quando si scorre il documento.

La posizione di scorrimento "0" deve portare l'oggetto all'estrema sinistra della finestra e scorrere la posizione "in basso alla fine del documento" deve portare l'oggetto all'estrema destra della finestra ma non oltre.

Ho provato questo, ma non è riuscito:

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

vedere la demo in 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 
     }); 
    }); 
}); 

Hai solo bisogno di spostare l'oggetto a sinistra (sulla base di window_width) con qualunque percentuale di scorrimento verso il basso (basata su document_height).

La larghezza della finestra e l'altezza del documento sono regolate per evitare che l'oggetto vada fuori dalla finestra.

Potrebbe essere necessario ricalcolare queste variabili sul ridimensionamento della finestra.