Do Something when the Element Reached into View

by Taufik Nurrohman

HTML

<h2>Scroll Down! &dArr;</h2>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
    height:3000px;
    background-color:#FFC90D;
}

h2 {
    font:bold 20px Times,Serif;
    margin:30px 30px 300px;
}

span {
    display:inline-block;
    background-color:green;
    padding:5px 10px;
    color:white;
}

div {
    width:120px;
    height:200px;
    background-color:black;
    margin:10px auto;
}

div.red {
    background-color:red;
}

JavaScript

function isScrolledIntoView(elem) {
    var $window = $(window),
        docViewTop = $window.scrollTop(),
        docViewBottom = docViewTop + $window.height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).outerHeight();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).on("scroll", function() {

    // Example 1
    if (isScrolledIntoView('span')) {
        $('span').text('Hey there!');
    } else {
        $('span').text('Good bye!');
    }

    // Example 2
    $('div').each(function() {
        if (isScrolledIntoView(this)) {
            $(this).addClass('red');
        } else {
            $(this).removeClass('red');
        }
    });

});