jquery.sticky.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. // Sticky Plugin v1.0.0 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: 2/14/2011
  7. // Date: 2/12/2012
  8. // Website: http://labs.anthonygarand.com/sticky
  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($) {
  13. var defaults = {
  14. topSpacing: 0,
  15. bottomSpacing: 0,
  16. className: 'is-sticky',
  17. wrapperClassName: 'sticky-wrapper',
  18. center: false,
  19. getWidthFrom: '',
  20. responsiveWidth: false
  21. },
  22. $window = $(window),
  23. $document = $(document),
  24. sticked = [],
  25. windowHeight = $window.height(),
  26. scroller = function() {
  27. var scrollTop = $window.scrollTop(),
  28. documentHeight = $document.height(),
  29. dwh = documentHeight - windowHeight,
  30. extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
  31. for (var i = 0; i < sticked.length; i++) {
  32. var s = sticked[i],
  33. elementTop = s.stickyWrapper.offset().top,
  34. etse = elementTop - s.topSpacing - extra;
  35. if (scrollTop <= etse) {
  36. if (s.currentTop !== null) {
  37. s.stickyElement
  38. .css('width', '')
  39. .css('position', '')
  40. .css('top', '');
  41. s.stickyElement.trigger('sticky-end', [s]).parent().removeClass(s.className);
  42. s.currentTop = null;
  43. }
  44. }
  45. else {
  46. var newTop = documentHeight - s.stickyElement.outerHeight()
  47. - s.topSpacing - s.bottomSpacing - scrollTop - extra;
  48. if (newTop < 0) {
  49. newTop = newTop + s.topSpacing;
  50. } else {
  51. newTop = s.topSpacing;
  52. }
  53. if (s.currentTop != newTop) {
  54. s.stickyElement
  55. .css('width', s.stickyElement.width())
  56. .css('position', 'fixed')
  57. .css('top', newTop);
  58. if (typeof s.getWidthFrom !== 'undefined') {
  59. s.stickyElement.css('width', $(s.getWidthFrom).width());
  60. }
  61. s.stickyElement.trigger('sticky-start', [s]).parent().addClass(s.className);
  62. s.currentTop = newTop;
  63. }
  64. }
  65. }
  66. },
  67. resizer = function() {
  68. windowHeight = $window.height();
  69. for (var i = 0; i < sticked.length; i++) {
  70. var s = sticked[i];
  71. if (typeof s.getWidthFrom !== 'undefined' && s.responsiveWidth === true) {
  72. s.stickyElement.css('width', $(s.getWidthFrom).width());
  73. }
  74. }
  75. },
  76. methods = {
  77. init: function(options) {
  78. var o = $.extend({}, defaults, options);
  79. return this.each(function() {
  80. var stickyElement = $(this);
  81. var stickyId = stickyElement.attr('id');
  82. var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName
  83. var wrapper = $('<div></div>')
  84. .attr('id', stickyId + '-sticky-wrapper')
  85. .addClass(o.wrapperClassName);
  86. stickyElement.wrapAll(wrapper);
  87. if (o.center) {
  88. stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
  89. }
  90. if (stickyElement.css("float") == "right") {
  91. stickyElement.css({"float":"none"}).parent().css({"float":"right"});
  92. }
  93. var stickyWrapper = stickyElement.parent();
  94. stickyWrapper.css('height', stickyElement.outerHeight());
  95. sticked.push({
  96. topSpacing: o.topSpacing,
  97. bottomSpacing: o.bottomSpacing,
  98. stickyElement: stickyElement,
  99. currentTop: null,
  100. stickyWrapper: stickyWrapper,
  101. className: o.className,
  102. getWidthFrom: o.getWidthFrom,
  103. responsiveWidth: o.responsiveWidth
  104. });
  105. });
  106. },
  107. update: scroller,
  108. unstick: function(options) {
  109. return this.each(function() {
  110. var unstickyElement = $(this);
  111. var removeIdx = -1;
  112. for (var i = 0; i < sticked.length; i++)
  113. {
  114. if (sticked[i].stickyElement.get(0) == unstickyElement.get(0))
  115. {
  116. removeIdx = i;
  117. }
  118. }
  119. if(removeIdx != -1)
  120. {
  121. sticked.splice(removeIdx,1);
  122. unstickyElement.unwrap();
  123. unstickyElement.removeAttr('style');
  124. }
  125. });
  126. }
  127. };
  128. // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
  129. if (window.addEventListener) {
  130. window.addEventListener('scroll', scroller, false);
  131. window.addEventListener('resize', resizer, false);
  132. } else if (window.attachEvent) {
  133. window.attachEvent('onscroll', scroller);
  134. window.attachEvent('onresize', resizer);
  135. }
  136. $.fn.sticky = function(method) {
  137. if (methods[method]) {
  138. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  139. } else if (typeof method === 'object' || !method ) {
  140. return methods.init.apply( this, arguments );
  141. } else {
  142. $.error('Method ' + method + ' does not exist on jQuery.sticky');
  143. }
  144. };
  145. $.fn.unstick = function(method) {
  146. if (methods[method]) {
  147. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  148. } else if (typeof method === 'object' || !method ) {
  149. return methods.unstick.apply( this, arguments );
  150. } else {
  151. $.error('Method ' + method + ' does not exist on jQuery.sticky');
  152. }
  153. };
  154. $(function() {
  155. setTimeout(scroller, 0);
  156. });
  157. })(jQuery);