Testings scroll function activate code

by leongaban

HTML

<div class="container">
    <div class="box box1">
        Div 1 Not Here
    </div>
    
    <div class="box box2">
        Div 2 Not Here
    </div>
    
    <div class="box box3">
        Div 3 Not Here
    </div>
    
    <div class="box box4">
        Div 4 HERE!
    </div>
    
    <div class="box box5">
        Div 3 Not Here
    </div>
</div>

CSS

.container {
    width: 200px;
    height: 200px;
    font-family: Arial, sans-serif;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: auto;
}

.box {
    width: 100%;
    height: 100px;
    line-height: 100px;
    color: black;
    text-align: center;
    border: 1px solid #ccc;
}

.box1 { background: cyan; }
.box2 { background: yellow; }
.box3 { background: orange; }
.box4 { color: white; background: red; }
.box5 { background: purple; }

JavaScript

function isScrolledIntoView(elem) {
            //alert("method invoked");
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top;
            var elemBottom = elemTop + $(elem).height();
            return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <=      docViewBottom) && (elemTop >= docViewTop));
        }

if ( isScrolledIntoView($('.box4'))) {
    console('HERE!');
    alert('HERE!');
}