JQuery fade in a div when user scroll to that div.

http://stackoverflow.com/questions/5367731

by Marcel

HTML

<ul id="tiles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

body { color:#333; font:12px 'segoe ui', sans-serif; }
span { top:1em; left:1em; position:fixed; }
ul#tiles { margin:50em 0; }
ul#tiles li { width:400px; height:200px; margin:20em auto; background:#333; }

JavaScript

tiles = $("ul#tiles li").fadeTo(0, 0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});