check to see if element is scrolled out of the screen and act on it

$.fn.isBottomInScreen.js

        $.fn.isBottomInScreen = function (outFn, inFn) {
            outFn = outFn || $.noop();
            inFn = inFn || $.noop();
            var $self = $(this);
            var inFlag = true;
            $(window).on('scroll', function () {
                requestAnimationFrame(function () {
                    if (($self.offset().top + $self.height()) < $(window).scrollTop()) { // element is out of screen
                        if (inFlag) {
                            $self.addClass('out').removeClass('in').trigger('out');
                            outFn.apply(this, arguments);
                            inFlag = false;
                        }
                    } else {
                        if (!inFlag) {
                            $self.addClass('in').removeClass('out').trigger('in');
                            inFn.apply(this, arguments);
                            inFlag = true;
                        }
                    }
                });
            }).trigger('scroll');
        };

        $('.mydiv').isBottomInScreen(
            function () {    // out
                $('.ab_test').attr('data-visible', 'false');
            },
            function () {    // in
                $('.ab_test').attr('data-visible', 'true');
            }
        );