Is element visible in the viewport?

in_viewport.js

(function(window, $) {

    $.fn.in_viewport = function(parent) {
        if (typeof parent === 'undefined') parent = window;

        var $child = this;

        if (!$child.is(':visible')) return false;

        var $parent = $(parent);

        var parentOffsetTop = $parent.scrollTop();
        var parentOffsetLeft = $parent.scrollLeft();
        var parentOffset = $parent.offset();

        if (parentOffset) {
            parentOffsetTop += parentOffset.top;
            parentOffsetLeft += parentOffset.left;
        }

        parentOffset = {
            left: parentOffsetLeft,
            top: parentOffsetTop
        };

        var parentDimensions = {
            width: $parent.outerWidth(),
            height: $parent.outerHeight()
        };

        var childOffset = $child.offset();
        var childDimensions = {
            width: $child.outerWidth(),
            height: $child.outerHeight()
        };

        return (childOffset.top >= parentOffset.top && childOffset.top <= (parentOffset.top + parentDimensions.height))
        &&     (childOffset.left >= parentOffset.left && childOffset.left <= (parentOffset.left + parentDimensions.width));
    };
    
})(this, this.jQuery);