title: How can I make objects appear and disappear based on how far up or down the user has scrolled on the page?
body: <p>I'm trying to make a header that is fixed to the top of the page only appear once the user has scrolled down past my other content at the top of the page (ie my "blackbox" div). I might like to use this same effect for some other stuff on the site if i can get the header to work too, but we'll see.</p>
  
  <pre><code>.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;
  }
  </code></pre>