JS - is_ In Viewport

by Michael Mandarino

JavaScript

$.fn.isInViewport = function () {
    var elTop = $(this).offset().top;
    var elBot = elTop + $(this).outerHeight();
    var vpTop = $(window).scrollTop();
    var vpBot = vpTop + $(window).height();

    if (elBot < vpTop) {
        return "isAboveVP"; //Above the Fold / Not in Viewport (VP)
    }
    else if (elTop > vpBot) {
        return "isBelowVP"; //Below the Fold / Not in Viewport (VP)
    }
    else {
        return true; //Is in Viewport (elBot > vpTop && elTop < vpBot)
    }
};

console.log($(this).isInViewport().elTop);
console.log('w ' + $windowH);

if ($(this).isInViewport() == "isAboveVP") {
    console.log('MM: above');

    $window.css({
        'top': $windowH
    });
}
else if ($(this).isInViewport() == "isBelowVP") {
    console.log('MM: below');

    $window.css({
        'top': -$windowH
    });
}
else {
    console.log('MM: visible');

    $window.css({
        'top': $windowH
    });
}