位置：固定和水平滾動

我試圖實現從查看器滾動時沿着頁面進行的標識向下延伸的摺紙鳥圖像的效果。我已經設法使用z軸和固定位置很好地工作，但只要頁面放大或調整大小，導致水平滾動即將啓動，效果就會消失。我非常非常業餘，並花了數小時閱讀非常類似的問題和答案，但沒有設法得到任何工作。位置：固定和水平滾動

這是我想要創建的想法http://www.debbiekate.com/indextest.html（我已經發布了特定的網站，而不是JFiddle，以使其更加清楚我試圖實現的目標）。

最接近的我是通過改變'鳥'元素的位置爲絕對值並在JavaScript中滾動它。（您可以通過刪除js的註釋標籤並將#bird的位置樣式更改爲絕對）來看到這一點。這可以按我的意願工作 - 當垂直滾動時，鳥類保持固定位置，但在需要時向左滾動，使其與頁眉標誌保持一致，而不會遮擋頁面的其餘部分。問題在於滾動性能非常不穩定，因爲據我瞭解，JS需要更長的時間來跟上滾動事件。我希望效果與使用位置一樣平滑：固定。

我看過很多類似的話題，我覺得最近的一個是在這裏：

Fixing a menu in one direction in jquery

這聽起來像一個相同的問題和完善的解決方案，但增加Jsarma的代碼到我的網站似乎也沒有無論如何，我無法弄清楚我做錯了什麼。我沒有正式的Web開發培訓，並沒有太多的JavaScript使用，任何幫助和你對新人的耐心都會得到廣泛的讚賞。

來源

2014-01-19 user3213168

你能提供你的代碼嗎？ –

@Fransico Corrales，效果依賴於圖像，據我所知，我不能在這裏或在JSFiddle的例子中包括？包含頁面源代碼的鏈接，如果你可以看一看，肯定會感激你的幫助。 – user3213168

您可以將鳥的位置更改爲絕對值而不是固定值。

然後構建一個jquery函數來偵聽窗口滾動並更改滾動條上鳥的頂部位置。

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     //get the current scroll position 
     var scrollPosition=$(window).scrollTop(); 
     //change the top of the bird 
     $('#bird').css('top',(-1*scrollPosition)+"px"); 
    }) 
});

來源

2014-01-19 22:51:45 rgbflawed

嗨rgbflawed，感謝您花時間看看。不幸的是，你的答案似乎與我在前面的js解決方案中提到的效果相同 - 它確實有效，但性能確實很差，尤其是在移動設備上。我用你的代碼更新了頁面，這樣你就可以看到我的意思了。我認爲我需要的是讓這個職位保持固定，但是實施一個把橫向事務作爲一個單獨問題的腳本。似乎Jsarma在我提到的鏈接中描述了這個確切的想法，但我無法得到這個工作。 – user3213168

@ user3213168首先，事實證明你確實需要做（-1 * scrollPosition）。我已經更新了我的答案。其次，我已經在我的Chrome桌面瀏覽器和我的Chrome移動瀏覽器上嘗試過了，兩者似乎都很順利。 – rgbflawed

我完全插入了你的代碼，但是當我滾動時，它似乎實際上向相反的方向移動（向上）？我嘗試了（+ 1 * scrollPosition），而不是修正了這個問題，現在鳥又跟着滾動方向，但它肯定還是滯後。我正在iPad上進行測試（包括Chrome和Safari），並且它非常明顯 - 當鳥向底部滾動時，滾動回頂部會變得更糟，從而破壞延伸到視口頂部的線條的效果。對不起，如果我錯過了什麼！ – user3213168

位置：固定和水平滾動

回答

相關問題