Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

jquery.sticky.js 7.4KB

vor 6 Jahren
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  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. (function (factory) {
  13. if (typeof define === 'function' && define.amd) {
  14. // AMD. Register as an anonymous module.
  15. define(['jquery'], factory);
  16. } else if (typeof module === 'object' && module.exports) {
  17. // Node/CommonJS
  18. module.exports = factory(require('jquery'));
  19. } else {
  20. // Browser globals
  21. factory(jQuery);
  22. }
  23. }(function ($) {
  24. var slice = Array.prototype.slice; // save ref to original slice()
  25. var splice = Array.prototype.splice; // save ref to original slice()
  26. var defaults = {
  27. topSpacing: 0,
  28. bottomSpacing: 0,
  29. className: 'is-sticky',
  30. wrapperClassName: 'sticky-wrapper',
  31. center: false,
  32. getWidthFrom: '',
  33. widthFromWrapper: true, // works only when .getWidthFrom is empty
  34. responsiveWidth: false
  35. },
  36. $window = $(window),
  37. $document = $(document),
  38. sticked = [],
  39. windowHeight = $window.height(),
  40. scroller = function() {
  41. var scrollTop = $window.scrollTop(),
  42. documentHeight = $document.height(),
  43. dwh = documentHeight - windowHeight,
  44. extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
  45. for (var i = 0, l = sticked.length; i < l; i++) {
  46. var s = sticked[i],
  47. elementTop = s.stickyWrapper.offset().top,
  48. etse = elementTop - s.topSpacing - extra;
  49. //update height in case of dynamic content
  50. s.stickyWrapper.css('height', s.stickyElement.outerHeight());
  51. if (scrollTop <= etse) {
  52. if (s.currentTop !== null) {
  53. s.stickyElement
  54. .css({
  55. 'width': '',
  56. 'position': '',
  57. 'top': ''
  58. });
  59. s.stickyElement.parent().removeClass(s.className);
  60. s.stickyElement.trigger('sticky-end', [s]);
  61. s.currentTop = null;
  62. }
  63. }
  64. else {
  65. var newTop = documentHeight - s.stickyElement.outerHeight()
  66. - s.topSpacing - s.bottomSpacing - scrollTop - extra;
  67. if (newTop < 0) {
  68. newTop = newTop + s.topSpacing;
  69. } else {
  70. newTop = s.topSpacing;
  71. }
  72. if (s.currentTop !== newTop) {
  73. var newWidth;
  74. if (s.getWidthFrom) {
  75. newWidth = $(s.getWidthFrom).width() || null;
  76. } else if (s.widthFromWrapper) {
  77. newWidth = s.stickyWrapper.width();
  78. }
  79. if (newWidth == null) {
  80. newWidth = s.stickyElement.width();
  81. }
  82. s.stickyElement
  83. .css('width', newWidth)
  84. .css('position', 'fixed')
  85. .css('top', newTop);
  86. s.stickyElement.parent().addClass(s.className);
  87. if (s.currentTop === null) {
  88. s.stickyElement.trigger('sticky-start', [s]);
  89. } else {
  90. // sticky is started but it have to be repositioned
  91. s.stickyElement.trigger('sticky-update', [s]);
  92. }
  93. if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) {
  94. // just reached bottom || just started to stick but bottom is already reached
  95. s.stickyElement.trigger('sticky-bottom-reached', [s]);
  96. } else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
  97. // sticky is started && sticked at topSpacing && overflowing from top just finished
  98. s.stickyElement.trigger('sticky-bottom-unreached', [s]);
  99. }
  100. s.currentTop = newTop;
  101. }
  102. }
  103. }
  104. },
  105. resizer = function() {
  106. windowHeight = $window.height();
  107. for (var i = 0, l = sticked.length; i < l; i++) {
  108. var s = sticked[i];
  109. var newWidth = null;
  110. if (s.getWidthFrom) {
  111. if (s.responsiveWidth) {
  112. newWidth = $(s.getWidthFrom).width();
  113. }
  114. } else if(s.widthFromWrapper) {
  115. newWidth = s.stickyWrapper.width();
  116. }
  117. if (newWidth != null) {
  118. s.stickyElement.css('width', newWidth);
  119. }
  120. }
  121. },
  122. methods = {
  123. init: function(options) {
  124. var o = $.extend({}, defaults, options);
  125. return this.each(function() {
  126. var stickyElement = $(this);
  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. stickyElement.wrapAll(wrapper);
  134. var stickyWrapper = stickyElement.parent();
  135. if (o.center) {
  136. stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
  137. }
  138. if (stickyElement.css("float") === "right") {
  139. stickyElement.css({"float":"none"}).parent().css({"float":"right"});
  140. }
  141. stickyWrapper.css('height', stickyHeight);
  142. o.stickyElement = stickyElement;
  143. o.stickyWrapper = stickyWrapper;
  144. o.currentTop = null;
  145. sticked.push(o);
  146. });
  147. },
  148. update: scroller,
  149. unstick: function(options) {
  150. return this.each(function() {
  151. var that = this;
  152. var unstickyElement = $(that);
  153. var removeIdx = -1;
  154. var i = sticked.length;
  155. while (i-- > 0) {
  156. if (sticked[i].stickyElement.get(0) === that) {
  157. splice.call(sticked,i,1);
  158. removeIdx = i;
  159. }
  160. }
  161. if(removeIdx !== -1) {
  162. unstickyElement.unwrap();
  163. unstickyElement
  164. .css({
  165. 'width': '',
  166. 'position': '',
  167. 'top': '',
  168. 'float': ''
  169. })
  170. ;
  171. }
  172. });
  173. }
  174. };
  175. // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
  176. if (window.addEventListener) {
  177. window.addEventListener('scroll', scroller, false);
  178. window.addEventListener('resize', resizer, false);
  179. } else if (window.attachEvent) {
  180. window.attachEvent('onscroll', scroller);
  181. window.attachEvent('onresize', resizer);
  182. }
  183. $.fn.sticky = function(method) {
  184. if (methods[method]) {
  185. return methods[method].apply(this, slice.call(arguments, 1));
  186. } else if (typeof method === 'object' || !method ) {
  187. return methods.init.apply( this, arguments );
  188. } else {
  189. $.error('Method ' + method + ' does not exist on jQuery.sticky');
  190. }
  191. };
  192. $.fn.unstick = function(method) {
  193. if (methods[method]) {
  194. return methods[method].apply(this, slice.call(arguments, 1));
  195. } else if (typeof method === 'object' || !method ) {
  196. return methods.unstick.apply( this, arguments );
  197. } else {
  198. $.error('Method ' + method + ' does not exist on jQuery.sticky');
  199. }
  200. };
  201. $(function() {
  202. setTimeout(scroller, 0);
  203. });
  204. }));