https://net4uservices.com/assets/js/viewport.jquery.js

1/* ====================================================
2 * jQuery Is In Viewport.
3 * https://github.com/frontid/jQueryIsInViewport
4 * Marcelo Iván Tosco (capynet)
5 * Inspired on https://stackoverflow.com/a/40658647/1413049
6 * ==================================================== */
7!function ($) {
8  'use strict'
9
10  var Class = function (el, cb) {
11    this.$el = $(el);
12    this.cb = cb;
13    this.watch();
14    return this;
15  };
16
17  Class.prototype = {
18
19    /**
20     * Checks if the element is in.
21     *
22     * @returns {boolean}
23     */
24    isIn: function isIn() {
25      var _self = this;
26      var $win = $(window);
27      var elementTop = _self.$el.offset().top;
28      var elementBottom = elementTop + _self.$el.outerHeight();
29      var viewportTop = $win.scrollTop();
30      var viewportBottom = viewportTop + $win.height();
31      return elementBottom > viewportTop && elementTop < viewportBottom;
32    },
33
34    /**
35     * Launch a callback indicating when the element is in and when is out.
36     */
37    watch: function () {
38      var _self = this;
39      var _isIn = false;
40
41      $(window).on('resize scroll', function () {
42
43        if (_self.isIn() && _isIn === false) {
44          _self.cb.call(_self.$el, 'entered');
45          _isIn = true;
46        }
47
48        if (_isIn === true && !_self.isIn()) {
49          _self.cb.call(_self.$el, 'leaved');
50          _isIn = false;
51        }
52
53      })
54    }
55
56
57  };
58
59  // jQuery plugin.
60  //-----------------------------------------------------------
61  $.fn.isInViewport = function (cb) {
62    return this.each(function () {
63      var $element = $(this);
64      var data = $element.data('isInViewport');
65      if (!data) {
66        $element.data('isInViewport', (new Class(this, cb)));
67      }
68    })
69  }
70
71}(window.jQuery);