css - How can I make objects appear and disappear based on how far up or down the user has scrolled on the page? -
i'm trying make header fixed top of page appear once user has scrolled down past other content @ top of page (ie "blackbox" div). might use same effect other stuff on site if can header work too, we'll see.
.header{ background:yellow; width:100%; height:70px; position:fixed; top:0px; box-shadow: 2px 5px 10px rgba(0,0,0,0.2); z-index: 10; } .blackbox{ background:black; width:100%; height:350px; top:60px; overflow:hidden; position:fixed; z-index:3; } .homespace{ width:100%; background:green; height:700px; position:relative; margin-top:0px; z-index:8; }
reference post:
how number of pixels user has scrolled down page?
basically determine how far user has scrolled, compare value height of "blackbox", have js apply class or use jquery hide() or show().
Comments
Post a Comment