如何保持jQuery函數從移動元素一直到左邊？

Question

我能夠實現這里發布的解決方案（“位置：固定和絕對同時。如何？”）以使div元素與頁面的其余部分水平移動，但保持垂直固定。 但是，此解決方案會導致所選元素一直移動到頁面左側（看起來是20px的邊距）。 我還是javascript和jQuery的新手，但據我了解，以下內容：

$(window).scroll(function(){
var $this = $(this);
$('#homeheader').css('left', 20 - $this.scrollLeft());});

獲取所選元素，並在用戶滾動時影響元素的CSS，使其從左側開始的位置成為由20px邊距調整的當前滾動條位置的某個函數。 如果這是正確的？ 如果是這樣，任何人都可以想到一種方法，我可以改變它，以便不是將所選元素一直移動到窗口的左側，我們只將它移動到最左邊作為我的身體元素的默認CSS位置HTML文檔（如下所示）？

body {font-size:100%;
width: 800px;
margin-top: 0px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;}

編輯：這是一個的jsfiddle （代碼在這里 ），我提出來說明這個問題。 我的頁面設計為當它以全屏或接近全屏模式顯示時，＃homeheader元素由於其寬度而顯示為水平居中，左右邊距設置為自動。 隨着頁面越來越小，邊距也會越來越大，直到它們完全消失並被20px的padding-left和padding-right設置替換。 所以在這一點上（當窗口足夠小以至於邊緣完全消失時），這就是jsfiddle顯示的內容，代碼似乎按預期工作，但是當窗口是完整大小時，JS會覆蓋CSS並推送div在任何滾動動作時，元素一直向左（擺脫邊緣）。

Answer 1

您需要處理兩個事件才能使其正常工作。 首先是你非常接近的滾動事件。 您可能想要做的唯一事情是使用偏移量來獲取基於文檔​​的當前左側位置值。

另一個尚未處理的事件是resize事件。 如果您不處理這個問題，那么一旦定義了左側位置，您的元素（標題）將始終存在，無論用戶是否調整窗口大小。

基本上這樣的東西應該工作：

var headeroffset;
var header = $('#homeheader');

// handle scroll
$(window).scroll(function() {
    // auto when not defined
    if (headeroffset === undefined) {
        // capture offset for current screen size
        headeroffset = header.offset();
    }
    // calculate offset
    var leftOffset = headeroffset.left - $(this).scrollLeft();
    // set left offset
    header.css('left', leftOffset);
});

// handle resize
$(window).resize(function() {
    // remove left setting
    // (this stops the element from being stuck after a resize event
    if (header.css('left') !== 'auto') {
        header.css('left', '');
        headeroffset = undefined;
    }
});

JSFiddle示例： http ： //jsfiddle.net/infiniteloops/ELCq7/6/

http://jsfiddle.net/infiniteloops/ELCq7/6/show

這種類型的效果可以完全用css完成，但我建議你看一下Steve Sanderson最近做的整頁應用系列。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

舉個例子，你可以這樣做：

http://jsfiddle.net/infiniteloops/ELCq7/18/

Answer 2

嘗試這個

$('#homeheader').css('left', parseInt($('body').css('margin-left')) -   $this.scrollLeft());});

我在這里做的只是用body的left-margin值替換20 。