如何根据浏览器中的位置更改元素的背景

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。