Detect if Object on Screen

by jdcast

HTML

<div id="wrapper">
    <div id="tester"></div>
</div>

CSS

body, html {
    height: 100%;
}

#wrapper {
    height: 400%;
    background: none repeat scroll 0 0 #f44 ;
}

#tester {
    position: absolute;
    top: 150%;
    left: 50%;
    width: 300px;
    height: 600px;
    background: none repeat scroll 0 0 #fff;
    border: 5px solid black;
}

JavaScript

$(window).scroll(function() {
    if (checkVisible($('#tester'))) {
        $('#wrapper').css("background-color", "#4f4");
    } else {
        $('#wrapper').css("background-color", "#f44");
    }
});

function checkVisible( elm, eval ) {
    eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
        vpW = $(window).width(), // Viewport Width
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();
    alert(vpH)
    alert(vpW)
    
    if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
    if (eval == "above") return ((y < (vpH + st)));
}


var newDate = new Date();
var DaysToAdd = 10;
newDate.setDate(newDate.getDate() + DaysToAdd); 
alert(newDate.getFullYear()+"-"+(newDate.getMonth()+1)+"-"+newDate.getDate());