Advertisement
Guest User

Untitled

a guest
Dec 8th, 2015
214
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Sticky Plugin v1.0.2 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: 16/04/2015
  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 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.         if (scrollTop <= etse) {
  43.           if (s.currentTop !== null) {
  44.             s.stickyElement
  45.               .css({
  46.                 'width': '',
  47.                 'position': '',
  48.                 'top': ''
  49.               });
  50.             s.stickyElement.parent().removeClass(s.className);
  51.             s.stickyElement.trigger('sticky-end', [s]);
  52.             s.currentTop = null;
  53.           }
  54.         }
  55.         else {
  56.           var newTop = documentHeight - s.stickyElement.outerHeight()
  57.             - s.topSpacing - s.bottomSpacing - scrollTop - extra;
  58.           if (newTop < 0) {
  59.             newTop = newTop + s.topSpacing;
  60.           } else {
  61.             newTop = s.topSpacing;
  62.           }
  63.           if (s.currentTop != newTop) {
  64.             var newWidth;
  65.             if ( s.getWidthFrom ) {
  66.                 newWidth = $(s.getWidthFrom).width() || null;
  67.             }
  68.             else if(s.widthFromWrapper) {
  69.                 newWidth = s.stickyWrapper.width();
  70.             }
  71.             if ( newWidth == null ) {
  72.                 newWidth = s.stickyElement.width();
  73.             }
  74.             s.stickyElement
  75.               .css('width', newWidth)
  76.               .css('position', 'fixed')
  77.               .css('top', newTop);
  78.  
  79.             s.stickyElement.parent().addClass(s.className);
  80.  
  81.             if (s.currentTop === null) {
  82.               s.stickyElement.trigger('sticky-start', [s]);
  83.             } else {
  84.               // sticky is started but it have to be repositioned
  85.               s.stickyElement.trigger('sticky-update', [s]);
  86.             }
  87.  
  88.             if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) {
  89.               // just reached bottom || just started to stick but bottom is already reached
  90.               s.stickyElement.trigger('sticky-bottom-reached', [s]);
  91.             } else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
  92.               // sticky is started && sticked at topSpacing && overflowing from top just finished
  93.               s.stickyElement.trigger('sticky-bottom-unreached', [s]);
  94.             }
  95.  
  96.             s.currentTop = newTop;
  97.           }
  98.         }
  99.       }
  100.     },
  101.     resizer = function() {
  102.       windowHeight = $window.height();
  103.  
  104.       for (var i = 0; i < sticked.length; i++) {
  105.         var s = sticked[i];
  106.         var newWidth = null;
  107.         if ( s.getWidthFrom ) {
  108.             if ( s.responsiveWidth === true ) {
  109.                 newWidth = $(s.getWidthFrom).width();
  110.             }
  111.         }
  112.         else if(s.widthFromWrapper) {
  113.             newWidth = s.stickyWrapper.width();
  114.         }
  115.         if ( newWidth != null ) {
  116.             s.stickyElement.css('width', newWidth);
  117.         }
  118.       }
  119.     },
  120.     methods = {
  121.       init: function(options) {
  122.         var o = $.extend({}, defaults, options);
  123.         return this.each(function() {
  124.           var stickyElement = $(this);
  125.  
  126.           var stickyId = stickyElement.attr('id');
  127.           var stickyHeight = stickyElement.outerHeight();
  128.           var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName
  129.           var wrapper = $('<div></div>')
  130.             .attr('id', wrapperId)
  131.             .addClass(o.wrapperClassName);
  132.  
  133.           stickyElement.wrapAll(wrapper);
  134.  
  135.           var stickyWrapper = stickyElement.parent();
  136.  
  137.           if (o.center) {
  138.             stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
  139.           }
  140.  
  141.           if (stickyElement.css("float") == "right") {
  142.             stickyElement.css({"float":"none"}).parent().css({"float":"right"});
  143.           }
  144.  
  145.           stickyWrapper.css('height', stickyHeight);
  146.  
  147.           o.stickyElement = stickyElement;
  148.           o.stickyWrapper = stickyWrapper;
  149.           o.currentTop    = null;
  150.  
  151.           sticked.push(o);
  152.         });
  153.       },
  154.       update: scroller,
  155.       unstick: function(options) {
  156.         return this.each(function() {
  157.           var that = this;
  158.           var unstickyElement = $(that);
  159.  
  160.           var removeIdx = -1;
  161.           var i = sticked.length;
  162.           while ( i-- > 0 )
  163.           {
  164.             if (sticked[i].stickyElement.get(0) === that)
  165.             {
  166.                 splice.call(sticked,i,1);
  167.                 removeIdx = i;
  168.             }
  169.           }
  170.           if(removeIdx != -1)
  171.           {
  172.             unstickyElement.unwrap();
  173.             unstickyElement
  174.               .css({
  175.                 'width': '',
  176.                 'position': '',
  177.                 'top': '',
  178.                 'float': ''
  179.               })
  180.             ;
  181.           }
  182.         });
  183.       }
  184.     };
  185.  
  186.   // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
  187.   if (window.addEventListener) {
  188.     window.addEventListener('scroll', scroller, false);
  189.     window.addEventListener('resize', resizer, false);
  190.   } else if (window.attachEvent) {
  191.     window.attachEvent('onscroll', scroller);
  192.     window.attachEvent('onresize', resizer);
  193.   }
  194.  
  195.   $.fn.sticky = function(method) {
  196.     if (methods[method]) {
  197.       return methods[method].apply(this, slice.call(arguments, 1));
  198.     } else if (typeof method === 'object' || !method ) {
  199.       return methods.init.apply( this, arguments );
  200.     } else {
  201.       $.error('Method ' + method + ' does not exist on jQuery.sticky');
  202.     }
  203.   };
  204.  
  205.   $.fn.unstick = function(method) {
  206.     if (methods[method]) {
  207.       return methods[method].apply(this, slice.call(arguments, 1));
  208.     } else if (typeof method === 'object' || !method ) {
  209.       return methods.unstick.apply( this, arguments );
  210.     } else {
  211.       $.error('Method ' + method + ' does not exist on jQuery.sticky');
  212.     }
  213.  
  214.   };
  215.   $(function() {
  216.     setTimeout(scroller, 0);
  217.   });
  218. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement