Advertisement
Guest User

Sticky Plugin

a guest
May 22nd, 2014
418
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.18 KB | None | 0 0
  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.  
  13. (function($) {
  14. var defaults = {
  15. topSpacing: 0,
  16. bottomSpacing: 0,
  17. className: 'is-sticky',
  18. wrapperClassName: 'sticky-wrapper',
  19. center: false,
  20. getWidthFrom: ''
  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.  
  32. for (var i = 0; i < sticked.length; i++) {
  33. var s = sticked[i],
  34. elementTop = s.stickyWrapper.offset().top,
  35. etse = elementTop - s.topSpacing - extra;
  36.  
  37. if (scrollTop <= etse) {
  38. if (s.currentTop !== null) {
  39. s.stickyElement
  40. .css('position', '')
  41. .css('top', '');
  42. s.stickyElement.parent().removeClass(s.className);
  43. s.currentTop = null;
  44. }
  45. }
  46. else {
  47. var newTop = documentHeight - s.stickyElement.outerHeight()
  48. - s.topSpacing - s.bottomSpacing - scrollTop - extra;
  49. if (newTop < 0) {
  50. newTop = newTop + s.topSpacing;
  51. } else {
  52. newTop = s.topSpacing;
  53. }
  54. if (s.currentTop != newTop) {
  55. s.stickyElement
  56. .css('position', 'fixed')
  57. .css('top', newTop);
  58.  
  59. if (typeof s.getWidthFrom !== 'undefined') {
  60. s.stickyElement.css('width', $(s.getWidthFrom).width());
  61. }
  62.  
  63. s.stickyElement.parent().addClass(s.className);
  64. s.currentTop = newTop;
  65. }
  66. }
  67. }
  68. },
  69. resizer = function() {
  70. windowHeight = $window.height();
  71. },
  72. methods = {
  73. init: function(options) {
  74. var o = $.extend(defaults, options);
  75. return this.each(function() {
  76. var stickyElement = $(this);
  77.  
  78. var stickyId = stickyElement.attr('id');
  79. var wrapper = $('<div></div>')
  80. .attr('id', stickyId + '-sticky-wrapper')
  81. .addClass(o.wrapperClassName);
  82. stickyElement.wrapAll(wrapper);
  83.  
  84. if (o.center) {
  85. stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
  86. }
  87.  
  88. if (stickyElement.css("float") == "right") {
  89. stickyElement.css({"float":"none"}).parent().css({"float":"right"});
  90. }
  91.  
  92. var stickyWrapper = stickyElement.parent();
  93. stickyWrapper.css('height', stickyElement.outerHeight());
  94. sticked.push({
  95. topSpacing: o.topSpacing,
  96. bottomSpacing: o.bottomSpacing,
  97. stickyElement: stickyElement,
  98. currentTop: null,
  99. stickyWrapper: stickyWrapper,
  100. className: o.className,
  101. getWidthFrom: o.getWidthFrom
  102. });
  103. });
  104. },
  105. update: scroller,
  106. unstick: function(options) {
  107. return this.each(function() {
  108. var unstickyElement = $(this);
  109.  
  110. removeIdx = -1;
  111. for (var i = 0; i < sticked.length; i++)
  112. {
  113. if (sticked[i].stickyElement.get(0) == unstickyElement.get(0))
  114. {
  115. removeIdx = i;
  116. }
  117. }
  118. if(removeIdx != -1)
  119. {
  120. sticked.splice(removeIdx,1);
  121. unstickyElement.unwrap();
  122. unstickyElement.removeAttr('style');
  123. }
  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.  
  137. $.fn.sticky = function(method) {
  138. if (methods[method]) {
  139. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  140. } else if (typeof method === 'object' || !method ) {
  141. return methods.init.apply( this, arguments );
  142. } else {
  143. $.error('Method ' + method + ' does not exist on jQuery.sticky');
  144. }
  145. };
  146.  
  147. $.fn.unstick = function(method) {
  148. if (methods[method]) {
  149. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  150. } else if (typeof method === 'object' || !method ) {
  151. return methods.unstick.apply( this, arguments );
  152. } else {
  153. $.error('Method ' + method + ' does not exist on jQuery.sticky');
  154. }
  155.  
  156. };
  157. $(function() {
  158. setTimeout(scroller, 0);
  159. });
  160. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement