Take the 2-minute tour ×

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.

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

Check out jQuery Waypoints.

Using this plugin, you could do something like this:

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

And your jQuery:

    offset: 'bottom-in-view'
share|improve this answer
thanks! Waypoints is just what I was looking for! I'll try it out. –  AHCo Nov 28 '11 at 12:50
add comment

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.


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.

share|improve this answer
Thanks. I think I'll try out Purmou's suggestion, as I'm not that well versed in JS, but I can follow instructions :) –  AHCo Nov 28 '11 at 12:49
add comment

Your Answer


