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'
});

Answer 2

I didn't make a full working example. But you'll need to use $(window).scroll(function(){ to execute every time the window scrolls. Then in that function you will need to check $(window).scrollTop() to determine how far the user has scrolled.

http://jsfiddle.net/s8dhy/

Then based on that value, you will add and remove classes or fadeIn and fadeOut. The title says you want "fade" in which case you'll want to use fadeIn and fadeOut. If you do just want to add and remove a class, then use addClass and removeClass.