1 // Sticky Plugin

     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         },

    20         $window = $(window),

    21         $document = $(document),

    22         sticked = [],

    23         windowHeight = $window.height(),

    24         scroller = function() {

    25             var scrollTop = $window.scrollTop(),

    26                 documentHeight = $document.height(),

    27                 dwh = documentHeight - windowHeight,

    28                 extra = (scrollTop > dwh) ? dwh - scrollTop : 0;

    29             for (var i = 0; i < sticked.length; i++) {

    30                 var s = sticked[i],

    31                     elementTop = s.stickyWrapper.offset().top,

    32                     etse = elementTop - s.topSpacing - extra;

    33                 if (scrollTop <= etse) {

    34                     if (s.currentTop !== null) {

    35                         s.stickyElement

    36                             .css('position', '')

    37                             .css('top', '')

    38                             .removeClass(s.className);

    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                             .addClass(s.className);

    56                         s.stickyElement.parent().addClass(s.className);

    57                         s.currentTop = newTop;

    58                     }

    59                 }

    60             }

    61         },

    62         resizer = function() {

    63             windowHeight = $window.height();

    64         },

    65         methods = {

    66             init: function(options) {

    67                 var o = $.extend(defaults, options);

    68                 return this.each(function() {

    69                     var stickyElement = $(this);

    70 

    71                     stickyId = stickyElement.attr('id');

    72                     wrapper = $('<div></div>')

    73                         .attr('id', stickyId + '-sticky-wrapper')

    74                         .addClass(o.wrapperClassName);

    75                     stickyElement.wrapAll(wrapper);

    76                     var stickyWrapper = stickyElement.parent();

    77                     stickyWrapper.css('height', stickyElement.outerHeight());

    78                     sticked.push({

    79                         topSpacing: o.topSpacing,

    80                         bottomSpacing: o.bottomSpacing,

    81                         stickyElement: stickyElement,

    82                         currentTop: null,

    83                         stickyWrapper: stickyWrapper,

    84                         className: o.className

    85                     });

    86                 });

    87             },

    88             update: scroller

    89         };

    90 

    91     // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):

    92     if (window.addEventListener) {

    93         window.addEventListener('scroll', scroller, false);

    94         window.addEventListener('resize', resizer, false);

    95     } else if (window.attachEvent) {

    96         window.attachEvent('onscroll', scroller);

    97         window.attachEvent('onresize', resizer);

    98     }

    99 

   100     $.fn.sticky = function(method) {

   101         if (methods[method]) {

   102             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

   103         } else if (typeof method === 'object' || !method ) {

   104             return methods.init.apply( this, arguments );

   105         } else {

   106             $.error('Method ' + method + ' does not exist on jQuery.sticky');

   107         }

   108     };

   109     $(function() {

   110         setTimeout(scroller, 0);

   111     });

   112 })(jQuery);