https://www.toolpartstore.com/js/c3fd1fdaf105dab78cd2072aff5acf1a/scrollWatch.js

1(function ($) {
2    "use strict";
3
4    var w = $(window),
5        subscribers = [];
6        //timeout;
7
8    function checkElement(set) {
9        var elem,
10            elem_position,
11            elem_width,
12            elem_height,
13            win_width,
14            win_height,
15            win_bottom,
16            win_right,
17            win_scroll_x,
18            win_scroll_y,
19            elem_x,
20            elem_y,
21            elem_x2,
22            elem_y2,
23            hidden_top,
24            hidden_right,
25            hidden_bottom,
26            hidden_left,
27            top_percent,
28            right_percent,
29            bottom_percent,
30            left_percent,
31            in_viewport,
32            full_in_viewport,
33            obj;
34
35        elem = set[0];
36        elem_position = elem.offset();
37        elem_width = parseInt(elem.innerWidth(), 10);
38        elem_height = parseInt(elem.innerHeight(), 10);
39        win_width = $(window).prop('innerWidth');
40        win_height = $(window).prop('innerHeight');
41        win_scroll_x = $(window).scrollLeft();
42
43        //http://help.dottoro.com/ljfswxte.php
44        //if (isNaN(win_scroll_x)) {
45            //win_scroll_x = $('html').prop('scrollLeft');
46        //}
47        win_scroll_y = $(window).scrollTop();
48
49        //http://help.dottoro.com/ljfswxte.php
50        //if (isNaN(win_scroll_y)) {
51            //win_scroll_y = $('html').prop('scrollTop');
52        //}
53        win_bottom = win_scroll_y + win_height;
54        win_right = win_scroll_x + win_width;
55
56        elem_x = elem_position.left;
57        elem_y = elem_position.top;
58        elem_x2 = elem_x + elem_width;
59        elem_y2 = elem_y + elem_height;
60
61        // how many pixel are hidden on all directions
62        hidden_top = elem_y - win_scroll_y;
63        hidden_right = -elem_x2 + win_right;
64        hidden_bottom = -elem_y2 + win_bottom;
65        hidden_left = elem_x - win_scroll_x;
66
67        // What percentage of the element in hidden in all directions
68        // Negative percentages represent the amount hidden on each direction
69        top_percent = (hidden_top * 100) / elem_height;
70        right_percent = (hidden_right * 100) / elem_width;
71        bottom_percent = (hidden_bottom * 100) / elem_height;
72        left_percent = (hidden_left * 100) / elem_width;
73
74        obj = {
75            'elem' : elem,
76            'elem_position' : elem_position,
77            'elem_width' : elem_width,
78            'elem_height' : elem_height,
79            'win_width' : win_width,
80            'win_height' : win_height,
81            'win_scroll_x' : win_scroll_x,
82            'win_scroll_y' : win_scroll_y,
83            'win_bottom' : win_bottom,
84            'win_right' : win_right,
85            'elem_x' : elem_x,
86            'elem_y' : elem_y,
87            'elem_x2' : elem_x2,
88            'elem_y2' : elem_y2,
89            'hidden_top' : hidden_top,
90            'hidden_right' : hidden_right,
91            'hidden_bottom' : hidden_bottom,
92            'hidden_left' : hidden_left,
93            'top_percent' : top_percent,
94            'right_percent' : right_percent,
95            'bottom_percent' : bottom_percent,
96            'left_percent' : left_percent,
97            'in_viewport' : in_viewport,
98            'full_in_viewport' : full_in_viewport
99        };
100
101        // Consider something to be in the viewport, or to appear only if at
102        // least 20% of that element is showing.
103        if (bottom_percent > -80 && top_percent > -80
104                && right_percent > -80 && left_percent > -80) {
105            in_viewport = true;
106            obj.in_viewport = true;
107            elem.trigger({
108                type: 'scrollWatch.appear',
109                info: obj
110            });
111        } else {
112            in_viewport = false;
113            obj.in_viewport = false;
114            elem.trigger({
115                type: 'scrollWatch.disappear',
116                info: obj
117            });
118        }
119
120        if (bottom_percent >= 0 && top_percent >= 0
121                && right_percent >= 0 && left_percent >= 0) {
122            full_in_viewport = true;
123            obj.full_in_viewport = true;
124
125            // follow the browser convention of naming events all lower-case
126            // no spaces
127            elem.trigger({
128                type: 'scrollWatch.appearfull',
129                info: obj
130            });
131        } else if (bottom_percent <= -100 || top_percent <= -100
132                || right_percent <= -100 || left_percent <= -100) {
133            full_in_viewport = false;

134            obj.full_in_viewport = false;
135
136            // follow the browser convention of naming events all lower-case
137            // no spaces
138            elem.trigger({
139                type: 'scrollWatch.disappearfull',
140                info: obj
141            });
142        }
143
144        if ($.isFunction(set[1])) {
145            set[1](obj);
146        }
147
148
149        console.log(top_percent);
150        console.log(right_percent);
151        console.log(bottom_percent);
152        console.log(left_percent);
153        console.log("==================");
154    }
155
156    function fireWatch() {
157        var i = 0,
158            currentSet;
159        for (i; subscribers[i]; i++) {
160            currentSet = subscribers[i];
161            checkElement(currentSet);
162        }
163    }
164
165    w.scroll(function () {
166        fireWatch();
167    }).resize(function () {
168        fireWatch();
169    });
170
171    // Fire once page loaded in case any element in the viewport has an action
172    // assigned to it to be performed when it comes into viewport.
173    // This could be, for example, to fade an element in. If the element is in
174    // the viewport when page is loaded, element won't fade in. To prevent this
175    // we fire scrollWatch manually.
176    w.load(fireWatch);
177
178    $.fn.scrollWatch = function (callback) {
179        return this.each(function () {
180            // callback is a function that gets passed a report of the current
181            // state of the element.
182            subscribers.push([$(this), callback]);
183        });
184    };
185}(jQuery));