如何根據瀏覽器中的位置更改元素的背景

Question

我曾經在過去看過一些非常有趣的單頁網站，其中滾動頁面時會出現某些元素。從我記得的效果看來只是用css寫的。我相信應該可以使用z-index和position屬性嗎？

不幸的是，我再次找不到頁面。

任何人有一個工作的例子？

乾杯 基督教

Answer 1

這與z-index就像你說的完成，但其他關鍵是具有項下有position:fixed，就像這樣：

#blocker { position:relative; z-index:100; width:100%; height:100px; } 
#uncover { position:fixed; right:0; top:0; z-index:50; } 

然後，當你向下滾動頁面，#uncover將會顯示，因爲它將保持與瀏覽器窗口的相同關係，而不管您在哪裏滾動，但是#blocker會隨頁面一起向上滾動。我創建了一個fiddle example here。