FadeIn on Scroll (jQuery)

Used to answer a question on StackOverflow.

by Ali Khaled

HTML

<div>
    <div class="fade">Fade In 01</div>
    <div class="fade">Fade In 02</div>
    <div class="fade">Fade In 03</div>
    <div class="fade">Fade In 04</div>
    <div class="fade">Fade In 05</div>
    <div class="fade">Fade In 06</div>
    <div class="fade">Fade In 07</div>
    <div class="fade">Fade In 08</div>
    <div class="fade">Fade In 09</div>
    <div class="fade">Fade In 10</div>
</div>

CSS

.fade {
    margin: 50px;
    padding: 50px;
    background-color: lightgreen;
    opacity: 0;
}

JavaScript

$(window).on("load",function() {
    function fade(pageLoad) {
        var min = 0.3;
        var max = 1.0;
        var threshold = 0.01;
        $('.fade').each(function() {
            /* Check the location of each desired element */
            var objectBottom = $(this).offset().top + $(this).outerHeight();
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();
            
            /* If the object is completely visible in the window, fade it in */
            if (objectBottom < windowBottom) { //object comes into view (scrolling down)
                if ($(this).css('opacity')<=min+threshold || pageLoad) {$(this).fadeTo(500,max);}
            } else { //object goes out of view (scrolling up)
                if ($(this).css('opacity')>=max-threshold || pageLoad) {$(this).fadeTo(500,min);}
            }
        });
    }
    fade(true); //fade elements during page-load
    $(window).scroll(function() {fade(false);}); //fade elements during scroll
});