how to change background of element depending on position in browser

I have seen a couple of really fancy one-page websites in the past where certain elements would appear when scrolling through a page. From what I remember the effect seemed to be written using css only. I believe that should be possible with th开发者_运维问答e z-index and position property?

Unfortunately, I can't find the pages again.

Anyone having a working example?

Cheers Christian

This is accomplished with z-index just like you said, but the other key is having the item beneath to have position:fixed, like so:

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

Then when you scroll down the page, #uncover will be revealed as it will stay in the same relation to the browser window no matter where you scroll, but #blocker scrolls up with the page. I've created a fiddle example here.