Как изменить фон элемента в зависимости от позиции в браузере

Question

Я видел пару действительно причудливых одностраничных сайтов в прошлом, когда некоторые элементы появлялись при прокрутке страницы. Из того, что я помню, эффект, казалось, был написан с использованием только css. Я считаю, что это должно быть возможно с помощью свойства z-index и position?

К сожалению, я не могу найти страницы снова.

Любой, у кого есть рабочий пример?

Приветствия Christian

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.