https://waselpro.com/static/js/jquery.visible.js

1(function($){
2
3    /**
4     * Copyright 2012, Digital Fusion
5     * Licensed under the MIT license.
6     * http://teamdf.com/jquery-plugins/license/
7     *
8     * @author Sam Sehnert
9     * @desc A small plugin that checks whether elements are within
10     *       the user visible viewport of a web browser.
11     *       only accounts for vertical position, not horizontal.
12     */
13    var $w = $(window);
14    $.fn.visible = function(partial,hidden,direction){
15
16        if (this.length < 1)
17            return;
18
19        var $t        = this.length > 1 ? this.eq(0) : this,
20            t         = $t.get(0),
21            vpWidth   = $w.width(),
22            vpHeight  = $w.height(),
23            direction = (direction) ? direction : 'both',
24            clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
25
26        if (typeof t.getBoundingClientRect === 'function'){
27
28            // Use this native browser method, if available.
29            var rec = t.getBoundingClientRect(),
30                tViz = rec.top    >= 0 && rec.top    <  vpHeight,
31                bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
32                lViz = rec.left   >= 0 && rec.left   <  vpWidth,
33                rViz = rec.right  >  0 && rec.right  <= vpWidth,
34                vVisible   = partial ? tViz || bViz : tViz && bViz,
35                hVisible   = partial ? lViz || rViz : lViz && rViz;
36
37            if(direction === 'both')
38                return clientSize && vVisible && hVisible;
39            else if(direction === 'vertical')
40                return clientSize && vVisible;
41            else if(direction === 'horizontal')
42                return clientSize && hVisible;
43        } else {
44
45            var viewTop         = $w.scrollTop(),

46                viewBottom      = viewTop + vpHeight,
47                viewLeft        = $w.scrollLeft(),
48                viewRight       = viewLeft + vpWidth,
49                offset          = $t.offset(),
50                _top            = offset.top,
51                _bottom         = _top + $t.height(),
52                _left           = offset.left,
53                _right          = _left + $t.width(),
54                compareTop      = partial === true ? _bottom : _top,
55                compareBottom   = partial === true ? _top : _bottom,
56                compareLeft     = partial === true ? _right : _left,
57                compareRight    = partial === true ? _left : _right;
58
59            if(direction === 'both')
60                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
61            else if(direction === 'vertical')
62                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
63            else if(direction === 'horizontal')
64                return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
65        }
66    };
67
68})(jQuery);