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）。

調整窗口寬度和文檔高度以防止物體超出窗口。

您可能需要在窗口重新調整時重新計算這些變量。