https://ms-hayashi.com/wp-content/themes/smart059/js/jquery.sticky.js

1// Sticky Plugin v1.0.3 for jQuery
2// =============
3// Author: Anthony Garand
4// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
5// Improvements by Leonardo C. Daronco (daronco)
6// Created: 02/14/2011
7// Date: 07/20/2015
8// Website: http://stickyjs.com/
9// Description: Makes an element on the page stick on the screen as you scroll
10//              It will only set the 'top' and 'position' of your element, you
11//              might need to adjust the width in some cases.
12
13(function($) {
14    var slice = Array.prototype.slice; // save ref to original slice()
15    var splice = Array.prototype.splice; // save ref to original slice()
16
17  var defaults = {
18      topSpacing: 0,
19      bottomSpacing: 0,
20      className: 'is-sticky',
21      wrapperClassName: 'sticky-wrapper',
22      center: false,
23      getWidthFrom: '',
24      widthFromWrapper: true, // works only when .getWidthFrom is empty
25      responsiveWidth: false
26    },
27    $window = $(window),
28    $document = $(document),
29    sticked = [],
30    windowHeight = $window.height(),
31    scroller = function() {
32      var scrollTop = $window.scrollTop(),
33        documentHeight = $document.height(),
34        dwh = documentHeight - windowHeight,
35        extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
36
37      for (var i = 0; i < sticked.length; i++) {
38        var s = sticked[i],
39          elementTop = s.stickyWrapper.offset().top,
40          etse = elementTop - s.topSpacing - extra;
41
42	//update height in case of dynamic content
43	s.stickyWrapper.css('height', s.stickyElement.outerHeight());
44
45        if (scrollTop <= etse) {
46          if (s.currentTop !== null) {
47            s.stickyElement
48              .css({
49                'width': '',
50                'position': '',
51                'top': ''
52              });
53            s.stickyElement.parent().removeClass(s.className);
54            s.stickyElement.trigger('sticky-end', [s]);
55            s.currentTop = null;
56          }
57        }
58        else {
59          var newTop = documentHeight - s.stickyElement.outerHeight()
60            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
61          if (newTop < 0) {
62            newTop = newTop + s.topSpacing;
63          } else {
64            newTop = s.topSpacing;
65          }
66          if (s.currentTop != newTop) {
67            var newWidth;
68            if (s.getWidthFrom) {
69                newWidth = $(s.getWidthFrom).width() || null;
70            } else if (s.widthFromWrapper) {
71                newWidth = s.stickyWrapper.width();
72            }
73            if (newWidth == null) {
74                newWidth = s.stickyElement.width();
75            }
76            s.stickyElement
77              .css('width', newWidth)
78              .css('position', 'fixed')
79              .css('top', newTop);
80
81            s.stickyElement.parent().addClass(s.className);
82
83            if (s.currentTop === null) {
84              s.stickyElement.trigger('sticky-start', [s]);
85            } else {
86              // sticky is started but it have to be repositioned
87              s.stickyElement.trigger('sticky-update', [s]);
88            }
89
90            if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) {
91              // just reached bottom || just started to stick but bottom is already reached
92              s.stickyElement.trigger('sticky-bottom-reached', [s]);
93            } else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
94              // sticky is started && sticked at topSpacing && overflowing from top just finished
95              s.stickyElement.trigger('sticky-bottom-unreached', [s]);
96            }
97
98            s.currentTop = newTop;
99          }
100        }
101      }
102    },
103    resizer = function() {
104      windowHeight = $window.height();
105
106      for (var i = 0; i < sticked.length; i++) {
107        var s = sticked[i];
108        var newWidth = null;
109        if (s.getWidthFrom) {
110            if (s.responsiveWidth === true) {
111                newWidth = $(s.getWidthFrom).width();
112            }
113        } else if(s.widthFromWrapper) {
114            newWidth = s.stickyWrapper.width();
115        }
116        if (newWidth != null) {
117            s.stickyElement.css('width', newWidth);
118        }
119      }
120    },
121    methods = {
122      init: function(options) {
123        var o = $.extend({}, defaults, options);
124        return this.each(function() {
125          var stickyElement = $(this);
126
127          var stickyId = stickyElement.attr('id');
128          var stickyHeight = stickyElement.outerHeight();
129          var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName
130          var wrapper = $('<div></div>')
131            .attr('id', wrapperId)
132            .addClass(o.wrapperClassName);
133
134          stickyElement.wrapAll(wrapper);
135
136          var stickyWrapper = stickyElement.parent();
137
138          if (o.center) {
139            stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
140          }
141
142          if (stickyElement.css("float") == "right") {
143            stickyElement.css({"float":"none"}).parent().css({"float":"right"});
144          }
145
146          stickyWrapper.css('height', stickyHeight);
147
148          o.stickyElement = stickyElement;
149          o.stickyWrapper = stickyWrapper;
150          o.currentTop    = null;
151
152          sticked.push(o);
153        });
154      },
155      update: scroller,
156      unstick: function(options) {
157        return this.each(function() {
158          var that = this;
159          var unstickyElement = $(that);
160
161          var removeIdx = -1;
162          var i = sticked.length;
163          while (i-- > 0) {
164            if (sticked[i].stickyElement.get(0) === that) {
165                splice.call(sticked,i,1);
166                removeIdx = i;
167            }
168          }
169          if(removeIdx != -1) {
170            unstickyElement.unwrap();
171            unstickyElement
172              .css({
173                'width': '',
174                'position': '',
175                'top': '',
176                'float': ''
177              })
178            ;
179          }
180        });
181      }
182    };
183
184  // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
185  if (window.addEventListener) {
186    window.addEventListener('scroll', scroller, false);
187    window.addEventListener('resize', resizer, false);
188  } else if (window.attachEvent) {
189    window.attachEvent('onscroll', scroller);
190    window.attachEvent('onresize', resizer);
191  }
192
193  $.fn.sticky = function(method) {
194    if (methods[method]) {
195      return methods[method].apply(this, slice.call(arguments, 1));
196    } else if (typeof method === 'object' || !method ) {
197      return methods.init.apply( this, arguments );
198    } else {
199      $.error('Method ' + method + ' does not exist on jQuery.sticky');
200    }
201  };
202
203  $.fn.unstick = function(method) {
204    if (methods[method]) {
205      return methods[method].apply(this, slice.call(arguments, 1));
206    } else if (typeof method === 'object' || !method ) {
207      return methods.unstick.apply( this, arguments );
208    } else {
209      $.error('Method ' + method + ' does not exist on jQuery.sticky');
210    }
211  };
212  $(function() {
213    setTimeout(scroller, 0);
214  });
215})(jQuery);