diff --git a/src/definitions/modules/sticky.js b/src/definitions/modules/sticky.js index abfb3e435..97b7bb2fe 100644 --- a/src/definitions/modules/sticky.js +++ b/src/definitions/modules/sticky.js @@ -30,7 +30,9 @@ $.fn.sticky = function(parameters) { $allModules .each(function() { var - settings = $.extend(true, {}, $.fn.sticky.settings, parameters), + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.sticky.settings, parameters) + : $.extend({}, $.fn.sticky.settings), className = settings.className, namespace = settings.namespace, @@ -62,35 +64,14 @@ $.fn.sticky = function(parameters) { module = { initialize: function() { - if(settings.context) { - $context = $(settings.context); - } - else { - $context = $container; - } - if($context.length === 0) { - module.error(error.invalidContext, settings.context, $module); - return; - } + + module.determineContext(); module.verbose('Initializing sticky', settings, $container); - module.save.positions(); - // error conditions - if( module.is.hidden() ) { - module.error(error.visible, $module); - } - if(module.cache.element.height > module.cache.context.height) { - module.reset(); - module.error(error.elementSize, $module); - return; - } + module.save.positions(); + module.checkErrors(); + module.bind.events(); - $window - .on('resize' + eventNamespace, module.event.resize) - ; - $scroll - .on('scroll' + eventNamespace, module.event.scroll) - ; if(settings.observeChanges) { module.observeChanges(); } @@ -111,15 +92,9 @@ $.fn.sticky = function(parameters) { if(observer) { observer.disconnect(); } - $window - .off('resize' + eventNamespace, module.event.resize) - ; - $scroll - .off('scroll' + eventNamespace, module.event.scroll) - ; - $module - .removeData(moduleNamespace) - ; + $window.off('resize' + eventNamespace, module.event.resize); + $scroll.off('scroll' + eventNamespace, module.event.scroll); + $module.removeData(moduleNamespace); }, observeChanges: function() { @@ -146,6 +121,37 @@ $.fn.sticky = function(parameters) { } }, + determineContext: function() { + if(settings.context) { + $context = $(settings.context); + } + else { + $context = $container; + } + if($context.length === 0) { + module.error(error.invalidContext, settings.context, $module); + return; + } + }, + + checkErrors: function() { + if( module.is.hidden() ) { + module.error(error.visible, $module); + } + if(module.cache.element.height > module.cache.context.height) { + module.reset(); + module.error(error.elementSize, $module); + return; + } + }, + + bind: { + events: function() { + $window.on('resize' + eventNamespace, module.event.resize); + $scroll.on('scroll' + eventNamespace, module.event.scroll); + } + }, + event: { resize: function() { requestAnimationFrame(function() { @@ -177,9 +183,7 @@ $.fn.sticky = function(parameters) { $element = $('
'), element = $element.get() ; - $element - .addClass(className.supported) - ; + $element.addClass(className.supported); return($element.css('position').match('sticky')); } }, @@ -203,8 +207,9 @@ $.fn.sticky = function(parameters) { height : $module.outerHeight() }, context = { - offset: $context.offset(), - height: $context.outerHeight() + offset : $context.offset(), + height : $context.outerHeight(), + bottomPadding : parseInt($context.css('padding-bottom'), 10) } ; module.cache = { @@ -221,9 +226,10 @@ $.fn.sticky = function(parameters) { bottom : element.offset.top + element.height }, context: { - top : context.offset.top, - height : context.height, - bottom : context.offset.top + context.height + top : context.offset.top, + height : context.height, + bottomPadding : context.bottomPadding, + bottom : context.offset.top + context.height - context.bottomPadding } }; module.set.containerSize(); @@ -309,7 +315,9 @@ $.fn.sticky = function(parameters) { else { module.debug('Settings container size', module.cache.context.height); if( Math.abs($container.height() - module.cache.context.height) > 5) { - $container.height(module.cache.context.height); + $container.css({ + height: module.cache.context.height + }); } } }, @@ -389,7 +397,12 @@ $.fn.sticky = function(parameters) { if(elementVisible) { if( module.is.initialPosition() ) { - if(scroll.top >= element.top) { + if(scroll.top >= context.bottom) { + console.log(scroll.top, context.bottom); + module.debug('Element bottom of container'); + module.bindBottom(); + } + else if(scroll.top >= element.top) { module.debug('Element passed, fixing element to page'); module.fixTop(); } @@ -470,7 +483,7 @@ $.fn.sticky = function(parameters) { $module .css('left' , '') .css('top' , '') - .css('bottom' , '') + .css('bottom' , module.cache.context.bottomPadding) .removeClass(className.fixed) .removeClass(className.top) .addClass(className.bound) @@ -491,6 +504,7 @@ $.fn.sticky = function(parameters) { module.set.offset(); $module .css('left', module.cache.element.left) + .css('bottom' , '') .removeClass(className.bound) .removeClass(className.bottom) .addClass(className.fixed) @@ -504,6 +518,7 @@ $.fn.sticky = function(parameters) { module.set.offset(); $module .css('left', module.cache.element.left) + .css('bottom' , '') .removeClass(className.bound) .removeClass(className.top) .addClass(className.fixed)