How can I make objects appear and disappear based on how far up or down the user has scrolled on the page?

Question

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.

.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;
}

Answer 1

You can use JQUERY.

Let's say you're scrolling the page.

$(document).scroll(function(){
    if($(document).scrollTop()>"100")
      //after you've scrolled 100 pixels...
      $("#something").show();
});

LIVE DEMO

More About : .scroll() .scrollTop()

Answer 2

You could use jQuery for this.

$(document).ready(function(){
    $(window).scroll(function () {
       $('.blackbox').fadeIn();
        if($(this).scrollTop()==0){
         $('.blackbox').fadeOut();
        }
    });
});

Here is an example on JSFiddle - LIVE DEMO (Scroll the lower right hand corner window to see the demo in action)

jQuery methods such as .scroll() and scrollTop() are all you need for this. They will make your life easy.

Answer 3

Reference this post:

How to get the number of pixels a user has scrolled down the page?

Basically determine how far the user has scrolled, compare that value to the height of your "blackbox", then have JS apply a class or use something like jQuery to hide() or show().