Developer
/* ====================================================
* jQuery Is In Viewport.
* https://github.com/frontid/jQueryIsInViewport
* Marcelo Iván Tosco (capynet)
* Inspired on https://stackoverflow.com/a/40658647/1413049
* ==================================================== */
!function ($) {
'use strict'
var Class = function (el, cb) {
this.$el = $(el);
this.cb = cb;
this.watch();
return this;
};
Class.prototype = {
/**
* Checks if the element is in.
*
* @returns {boolean}
*/
isIn: function isIn() {
var _self = this;
var $win = $(window);
var elementTop = _self.$el.offset().top;
var elementBottom = elementTop + _self.$el.outerHeight();
var viewportTop = $win.scrollTop();
var viewportBottom = viewportTop + $win.height();
return elementBottom > viewportTop && elementTop < viewportBottom;
},
/**
* Launch a callback indicating when the element is in and when is out.
*/
watch: function () {
var _self = this;
var _isIn = false;
$(window).on('resize scroll', function () {
if (_self.isIn() && _isIn === false) {
_self.cb.call(_self.$el, 'entered');
_isIn = true;
}
if (_isIn === true && !_self.isIn()) {
_self.cb.call(_self.$el, 'leaved');
_isIn = false;
}
})
}
};
// jQuery plugin.
//-----------------------------------------------------------
$.fn.isInViewport = function (cb) {
return this.each(function () {
var $element = $(this);
var data = $element.data('isInViewport');
if (!data) {
$element.data('isInViewport', (new Class(this, cb)));
}
})
}
}(window.jQuery);
Developer
To ensure a smooth integration process and optimal performance, follow these best practices: