How to make element fade in on page scroll?

Question

I have the following element in my page:

<div id="banner" class="disappear">Hello</div>

The CSS for this element is:

#banner {position:fixed;}
.disappear {opacity:0;}
.appear {opacity:1;}`

I'd like to know how to change the class from .disappear to .appear with jQuery when the page scrolls to a certain point, and then back to .disappear when the page returns to original position.

Answer 1

Check out jQuery Waypoints.

Using this plugin, you could do something like this:

<div id="banner">Hello</div>

And your jQuery:

$("#banner").waypoint(function(){
    $(this).fadeIn(750);
},{
    offset: 'bottom-in-view'
});