Shoora
5/3/2019 - 5:39 AM

jquery.is-in-viewport.js

$('.element').inViewport(function(Element, isInViewport) {
  // code
});

if ( $('#element').inViewport('getBoolean') ) {
  // code
}

/*  code */
;(function () {
    /**
     * 
     * @type {function[]}
     */
    var onScrollCallbacks = [];

    $(window).on('scroll', function onScroll() {
        $.each(onScrollCallbacks, function each(index, callback) {
            callback();
        });
    });

    /**
     * 
     * @param {function|string} callback
     * @return {jQuery|boolean[]|boolean}
     */
    $.fn.inViewport = function inViewport(callback) {
        var $elements = this;

        if ('getBoolean' === callback) {
            return resolve();
        }

        else {
            onScrollCallbacks.push(resolve);

            resolve();

            return $elements;
        }

        /**
         *
         * @return {boolean|boolean[]}
         */
        function resolve() {
            /**
             * 
             * @type {boolean[]}
             */
            var isInViewportAry = [];

            $elements.each(function each(index, Element) {
                var rect = Element.getBoundingClientRect();

                var winHeight = (window.innerHeight || document.documentElement.clientHeight);
                var winWidth = (window.innerWidth || document.documentElement.clientWidth);

                var isTopInView = rect.top >= 0 && rect.top <= winHeight;
                var isBottomInView = rect.bottom >= 0 && rect.bottom <= winHeight;

                var isTopBeforeView = rect.top <= 0;
                var isBottomAfterView = rect.bottom >= winHeight;

                var isInViewportY = (
                    (isTopInView || isBottomInView) ||
                    (isTopBeforeView && isBottomAfterView)
                );

                var isInViewportX = (
                    (rect.left >= 0 && rect.left <= winWidth) ||
                    (rect.right >= 0 && rect.right <= winWidth)
                );

                var isInViewport = isInViewportX && isInViewportY;

                'function' === typeof callback && callback(Element, isInViewport);

                isInViewportAry.push(isInViewport);
            });

            return isInViewportAry.length > 1 ? isInViewportAry : isInViewportAry[0];
        }
    }
})();