Search code examples
jqueryhtmlcssopacityonscroll

How to make element fade in on page scroll?

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.

Solution

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