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.
精彩评论