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

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 会随页面向上滚动。我在这里创建了一个小提琴示例。