1ae784e_jquery.sticky_10.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  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. },
  21. $window = $(window),
  22. $document = $(document),
  23. sticked = [],
  24. windowHeight = $window.height(),
  25. scroller = function() {
  26. var scrollTop = $window.scrollTop(),
  27. documentHeight = $document.height(),
  28. dwh = documentHeight - windowHeight,
  29. extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
  30. for (var i = 0; i < sticked.length; i++) {
  31. var s = sticked[i],
  32. elementTop = s.stickyWrapper.offset().top,
  33. etse = elementTop - s.topSpacing - extra;
  34. if (scrollTop <= etse) {
  35. if (s.currentTop !== null) {
  36. s.stickyElement
  37. .css('position', '')
  38. .css('top', '');
  39. s.stickyElement.parent().removeClass(s.className);
  40. s.currentTop = null;
  41. }
  42. }
  43. else {
  44. var newTop = documentHeight - s.stickyElement.outerHeight()
  45. - s.topSpacing - s.bottomSpacing - scrollTop - extra;
  46. if (newTop < 0) {
  47. newTop = newTop + s.topSpacing;
  48. } else {
  49. newTop = s.topSpacing;
  50. }
  51. if (s.currentTop != newTop) {
  52. s.stickyElement
  53. .css('position', 'fixed')
  54. .css('top', newTop);
  55. if (typeof s.getWidthFrom !== 'undefined') {
  56. s.stickyElement.css('width', $(s.getWidthFrom).width());
  57. }
  58. s.stickyElement.parent().addClass(s.className);
  59. s.currentTop = newTop;
  60. }
  61. }
  62. }
  63. },
  64. resizer = function() {
  65. windowHeight = $window.height();
  66. },
  67. methods = {
  68. init: function(options) {
  69. var o = $.extend(defaults, options);
  70. return this.each(function() {
  71. var stickyElement = $(this);
  72. var stickyId = stickyElement.attr('id');
  73. var wrapper = $('<div></div>')
  74. .attr('id', stickyId + '-sticky-wrapper')
  75. .addClass(o.wrapperClassName);
  76. stickyElement.wrapAll(wrapper);
  77. if (o.center) {
  78. stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
  79. }
  80. if (stickyElement.css("float") == "right") {
  81. stickyElement.css({"float":"none"}).parent().css({"float":"right"});
  82. }
  83. var stickyWrapper = stickyElement.parent();
  84. stickyWrapper.css('height', stickyElement.outerHeight());
  85. sticked.push({
  86. topSpacing: o.topSpacing,
  87. bottomSpacing: o.bottomSpacing,
  88. stickyElement: stickyElement,
  89. currentTop: null,
  90. stickyWrapper: stickyWrapper,
  91. className: o.className,
  92. getWidthFrom: o.getWidthFrom
  93. });
  94. });
  95. },
  96. update: scroller
  97. };
  98. // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
  99. if (window.addEventListener) {
  100. window.addEventListener('scroll', scroller, false);
  101. window.addEventListener('resize', resizer, false);
  102. } else if (window.attachEvent) {
  103. window.attachEvent('onscroll', scroller);
  104. window.attachEvent('onresize', resizer);
  105. }
  106. $.fn.sticky = function(method) {
  107. if (methods[method]) {
  108. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  109. } else if (typeof method === 'object' || !method ) {
  110. return methods.init.apply( this, arguments );
  111. } else {
  112. $.error('Method ' + method + ' does not exist on jQuery.sticky');
  113. }
  114. };
  115. $(function() {
  116. setTimeout(scroller, 0);
  117. });
  118. })(jQuery);