JQuery plugin to observe appearance of the element. Intersection observer using jquery.

01-README.md

Usage

$('#observeMe').appearanceObserver({
    onAppeared: function () {
        // I am appeared callback
    },
    onDisappeared: function () {
        // I am disappeared callback
    }
});

See also https://gist.github.com/gunjanpatel/4982d312c28434b1ba2250b9d16f0b3e

jquery-appearance-observer.js

(function ($) {
    "use strict";
    $.fn.appearanceObserver = function (options) {
        let defaults = {
            onAppeared: function () {
            },
            onDisappeared: function () {
            },
        };

        let settings = $.extend({}, defaults, options),
            observe = this,
            observeTopOffset = observe.offset().top,
            observeHeight = observe.outerHeight(),
            windowHeight = $(window).height(),
            windowScrollTop = $(window).scrollTop(),
            observeTop = (observeTopOffset + observeHeight - windowHeight);

        if (windowScrollTop > observeTop && observeTopOffset < windowScrollTop) {
            settings.onDisappeared.call();
        } else {
            settings.onAppeared.call();
        }

        return this;
    };
}(jQuery));