如何讓jQuery函數一直向左移動元素？

我能夠實現解決方案發布here（「位置：固定和絕對在同一時間。如何？」）以獲得div元素水平移動與頁面的其餘部分，但保持垂直固定。但是，這種解決方案會導致所選元素一直移動到頁面的左側（看起來像是20px的邊距）。我還是新的JavaScript和jQuery，但據我瞭解，以下內容：如何讓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（代碼here），我提出來說明這個問題。我的頁面設計爲當以全屏模式或接近全屏模式顯示時，#homeheader元素由於其寬度和左右邊距被設置爲自動而呈水平居中。隨着頁面越來越小，邊距也會變得越來越小，直到它們完全消失，並且被20px的填充左側和填充右側設置替代。所以在這一點上（當窗口足夠小，邊距完全消失時），這就是jsfiddle所顯示的，代碼似乎按預期工作，但是當窗口全尺寸時，JS會覆蓋CSS並將div元素一直到左側（擺脫邊距）在任何滾動動作。

來源

2012-03-08 GChorn

什麼CSS是'＃homeheader'？沒有一個例子就很難說出發生了什麼。一個[jsbin]（http://jsbin.com）可能會幫助:) – 2012-03-09 03:43:23

@ChristianVarga，我編輯了我的文章以包含一個jsfiddle，但是從我編輯的其餘部分可以看到，它並不完全說明我的問題... – GChorn 2012-03-10 01:57:57

關於你的jsFiddle，只需在'Fiddle URL的末尾添加'/ show' ... [http://jsfiddle.net/6nxBg/show/](http://jsfiddle.net/6nxBg/show /） – Sparky 2012-03-10 02:09:44

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

尚未處理的其他事件是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/

來源

2012-03-10 04:52:41

非常感謝您的幫助！我沒有太多時間去玩你發佈的內容，但是有兩件事情可以處理完全是有意義的。但是，當我打開jsfiddle示例時，當您向左和向右滾動時，div元素不再左右移動（我的目的是保持垂直固定而不是水平固定）。這是有意的嗎？ – GChorn 2012-03-10 05:37:31

有趣的是，對於我在IE 10，IE7和Chrome中，標題元素按預期移動。我的目的是確保標題在向左/向右滾動時看起來是靜態的，但在向上/向下滾動時固定。如果我不得不猜測它可能是'header.css（'left'）==='auto''，可能會導致您看到的問題。也許返回的價值是不同的，可以添加到條件。 – 2012-03-10 06:22:49

啊，你說得對，這是一個瀏覽器問題。我在Mac上運行Ubuntu，所以我一直在使用Firefox。但是我進入了OSX並嘗試了使用Safari的jsfiddle，並且它按預期運行（儘管在OSX中不再使用Firefox）。有沒有適用於所有瀏覽器的解決方案？ – GChorn 2012-03-10 08:15:15

試試這個

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

我在這裏做什麼只是body的left-margin值替換20。

來源

2012-03-09 04:08:35 Rezigned

哦！感謝您的回覆;我認爲這是朝着正確的方向前進。不過，我認爲「margin-left：auto」設置在某種程度上默認爲0，因爲現在元素正在向左移動。然後，我嘗試從「填充左側」的答案中更改'margin-left'，但這隻會使它從左側返回20px。 – GChorn 2012-03-09 04:30:58

如何讓jQuery函數一直向左移動元素？

回答

相關問題