https://foulees.com/shop/js/sticky/sticky-kit.js

10
2
3/**
4@license Sticky-kit v1.1.3 | MIT | Leaf Corcoran 2015 | http://leafo.net
5 */
6
7(function() {
8  var $, win;
9
10  $ = window.jQuery;
11
12  win = $(window);
13
14  $.fn.stick_in_parent = function(opts) {
15    var doc, elm, enable_bottoming, fn, i, inner_scrolling, len, manual_spacer, offset_top, outer_width, parent_selector, recalc_every, sticky_class;
16    if (opts == null) {
17      opts = {};
18    }
19    sticky_class = opts.sticky_class, inner_scrolling = opts.inner_scrolling, recalc_every = opts.recalc_every, parent_selector = opts.parent, offset_top = opts.offset_top, manual_spacer = opts.spacer, enable_bottoming = opts.bottoming;
20    if (offset_top == null) {
21      offset_top = 0;
22    }
23    if (parent_selector == null) {
24      parent_selector = void 0;
25    }
26    if (inner_scrolling == null) {
27      inner_scrolling = true;
28    }
29    if (sticky_class == null) {
30      sticky_class = "is_stuck";
31    }
32    doc = $(document);
33    if (enable_bottoming == null) {
34      enable_bottoming = true;
35    }
36    outer_width = function(el) {
37      var _el, computed, w;
38      if (window.getComputedStyle) {
39        _el = el[0];
40        computed = window.getComputedStyle(el[0]);
41        w = parseFloat(computed.getPropertyValue("width")) + parseFloat(computed.getPropertyValue("margin-left")) + parseFloat(computed.getPropertyValue("margin-right"));
42        if (computed.getPropertyValue("box-sizing") !== "border-box") {
43          w += parseFloat(computed.getPropertyValue("border-left-width")) + parseFloat(computed.getPropertyValue("border-right-width")) + parseFloat(computed.getPropertyValue("padding-left")) + parseFloat(computed.getPropertyValue("padding-right"));
44        }
45        return w;
46      } else {
47        return el.outerWidth(true);
48      }
49    };
50    fn = function(elm, padding_bottom, parent_top, parent_height, top, height, el_float, detached) {
51      var bottomed, detach, fixed, last_pos, last_scroll_height, offset, parent, recalc, recalc_and_tick, recalc_counter, spacer, tick;
52      if (elm.data("sticky_kit")) {
53        return;
54      }
55      elm.data("sticky_kit", true);
56      last_scroll_height = doc.height();
57      parent = elm.parent();
58      if (parent_selector != null) {
59        parent = parent.closest(parent_selector);
60      }
61      if (!parent.length) {
62        throw "failed to find stick parent";
63      }
64      fixed = false;
65      bottomed = false;
66      spacer = manual_spacer != null ? manual_spacer && elm.closest(manual_spacer) : $("<div />");
67      if (spacer) {
68        spacer.css('position', elm.css('position'));
69      }
70      recalc = function() {
71        var border_top, padding_top, restore;
72        if (detached) {
73          return;
74        }
75        last_scroll_height = doc.height();
76        border_top = parseInt(parent.css("border-top-width"), 10);
77        padding_top = parseInt(parent.css("padding-top"), 10);
78        padding_bottom = parseInt(parent.css("padding-bottom"), 10);
79        parent_top = parent.offset().top + border_top + padding_top;
80        parent_height = parent.height();
81        if (fixed) {
82          fixed = false;
83          bottomed = false;
84          if (manual_spacer == null) {
85            elm.insertAfter(spacer);
86            spacer.detach();
87          }
88          elm.css({
89            position: "",
90            top: "",
91            width: "",
92            bottom: ""
93          }).removeClass(sticky_class);
94          restore = true;
95        }
96        top = elm.offset().top - (parseInt(elm.css("margin-top"), 10) || 0) - offset_top;
97        height = elm.outerHeight(true);
98        el_float = elm.css("float");
99        if (spacer) {
100          spacer.css({
101            width: outer_width(elm),
102            height: height,
103            display: elm.css("display"),
104            "vertical-align": elm.css("vertical-align"),
105            "float": el_float
106          });
107        }
108        if (restore) {
109          return tick();
110        }
111      };
112      recalc();
113      if (height === parent_height) {
114        return;
115      }
116      last_pos = void 0;
117      offset = offset_top;
118      recalc_counter = recalc_every;
119      tick = function() {
120        var css, delta, recalced, scroll, will_bottom, win_height;
121        if (detached) {
122          return;
123        }
124        recalced = false;
125        if (recalc_counter != null) {
126          recalc_counter -= 1;
127          if (recalc_counter <= 0) {
128            recalc_counter = recalc_every;
129            recalc();
130            recalced = true;
131          }
132        }
133        if (!recalced && doc.height() !== last_scroll_height) {
134          recalc();
135          recalced = true;
136        }
137        scroll = win.scrollTop();
138        if (last_pos != null) {
139          delta = scroll - last_pos;
140        }
141        last_pos = scroll;
142        if (fixed) {
143          if (enable_bottoming) {
144            will_bottom = scroll + height + offset > parent_height + parent_top;
145            if (bottomed && !will_bottom) {
146              bottomed = false;
147              elm.css({
148                position: "fixed",
149                bottom: "",
150                top: offset
151              }).trigger("sticky_kit:unbottom");
152            }
153          }
154          if (scroll < top) {
155            fixed = false;
156            offset = offset_top;
157            if (manual_spacer == null) {
158              if (el_float === "left" || el_float === "right") {
159                elm.insertAfter(spacer);
160              }
161              spacer.detach();
162            }
163            css = {
164              position: "",
165              width: "",
166              top: ""
167            };
168            elm.css(css).removeClass(sticky_class).trigger("sticky_kit:unstick");
169          }
170          if (inner_scrolling) {
171            win_height = win.height();
172            if (height + offset_top > win_height) {
173              if (!bottomed) {
174                offset -= delta;
175                offset = Math.max(win_height - height, offset);
176                offset = Math.min(offset_top, offset);
177                if (fixed) {
178                  elm.css({
179                    top: offset + "px"
180                  });
181                }
182              }
183            }
184          }
185        } else {
186          if (scroll > top) {
187            fixed = true;
188            css = {
189              position: "fixed",
190              top: offset
191            };
192            css.width = elm.css("box-sizing") === "border-box" ? elm.outerWidth() + "px" : elm.width() + "px";
193            elm.css(css).addClass(sticky_class);
194            if (manual_spacer == null) {
195              elm.after(spacer);
196              if (el_float === "left" || el_float === "right") {
197                spacer.append(elm);
198              }
199            }
200            elm.trigger("sticky_kit:stick");
201          }
202        }
203        if (fixed && enable_bottoming) {
204          if (will_bottom == null) {
205            will_bottom = scroll + height + offset > parent_height + parent_top;
206          }
207          if (!bottomed && will_bottom) {
208            bottomed = true;
209            if (parent.css("position") === "static") {
210              parent.css({
211                position: "relative"
212              });
213            }
214            return elm.css({
215              position: "absolute",
216              bottom: padding_bottom,
217              top: "auto"
218            }).trigger("sticky_kit:bottom");
219          }
220        }
221      };
222      recalc_and_tick = function() {
223        recalc();
224        return tick();
225      };
226      detach = function() {
227        detached = true;
228        win.off("touchmove", tick);
229        win.off("scroll", tick);
230        win.off("resize", recalc_and_tick);
231        $(document.body).off("sticky_kit:recalc", recalc_and_tick);
232        elm.off("sticky_kit:detach", detach);
233        elm.removeData("sticky_kit");
234        elm.css({
235          position: "",
236          bottom: "",
237          top: "",
238          width: ""
239        });
240        parent.position("position", "");
241        if (fixed) {
242          if (manual_spacer == null) {
243            if (el_float === "left" || el_float === "right") {
244              elm.insertAfter(spacer);
245            }
246            spacer.remove();
247          }
248          return elm.removeClass(sticky_class);
249        }
250      };
251      win.on("touchmove", tick);
252      win.on("scroll", tick);
253      win.on("resize", recalc_and_tick);
254      $(document.body).on("sticky_kit:recalc", recalc_and_tick);
255      elm.on("sticky_kit:detach", detach);
256      return setTimeout(tick, 0);
257    };
258    for (i = 0, len = this.length; i < len; i++) {
259      elm = this[i];
260      fn($(elm));
261    }
262    return this;
263  };
264
265}).call(this);