$('.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];
}
}
})();