From 629eeff8928b89168142fbaaa226c03bc19475a0 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 5 Jun 2015 13:45:54 -0400 Subject: [PATCH] #2366, fixes when sticky content is larger than context height. Fixes margin bottom not clearing when pushing: true --- src/definitions/modules/sticky.js | 75 +++++++++++++++++++++++++------ 1 file changed, 61 insertions(+), 14 deletions(-) diff --git a/src/definitions/modules/sticky.js b/src/definitions/modules/sticky.js index de00a4c60..87dff5872 100644 --- a/src/definitions/modules/sticky.js +++ b/src/definitions/modules/sticky.js @@ -239,6 +239,9 @@ $.fn.sticky = function(parameters) { offset : $context.offset(), height : $context.outerHeight(), bottomPadding : parseInt($context.css('padding-bottom'), 10) + }, + container = { + height: $container.outerHeight() } ; module.cache = { @@ -333,7 +336,9 @@ $.fn.sticky = function(parameters) { set: { offset: function() { module.verbose('Setting offset on element', settings.offset); - $module.css('margin-top', settings.offset); + $module + .css('margin-top', settings.offset) + ; }, containerSize: function() { var @@ -345,7 +350,8 @@ $.fn.sticky = function(parameters) { module.determineContainer(); } else { - if( Math.abs($container.height() - module.cache.context.height) > 5) { + console.log($container.outerHeight(), module.cache.context.height, $module); + if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) { module.debug('Context has padding, specifying exact height for container', module.cache.context.height); $container.css({ height: module.cache.context.height @@ -353,6 +359,14 @@ $.fn.sticky = function(parameters) { } } }, + minimumSize: function() { + var + element = module.cache.element + ; + $container + .css('min-height', element.height) + ; + }, scroll: function(scroll) { module.debug('Setting scroll on element', scroll); if(module.elementScroll == scroll) { @@ -432,11 +446,11 @@ $.fn.sticky = function(parameters) { if(elementVisible) { if( module.is.initialPosition() ) { - if(scroll.top >= context.bottom) { + if(scroll.top > context.bottom) { module.debug('Element bottom of container'); module.bindBottom(); } - else if(scroll.top >= element.top) { + else if(scroll.top > element.top) { module.debug('Element passed, fixing element to page'); module.fixTop(); } @@ -504,9 +518,11 @@ $.fn.sticky = function(parameters) { module.debug('Binding element to top of parent container'); module.remove.offset(); $module - .css('left' , '') - .css('top' , '') - .css('margin-bottom' , '') + .css({ + left : '', + top : '', + marginBottom : '' + }) .removeClass(className.fixed) .removeClass(className.bottom) .addClass(className.bound) @@ -519,9 +535,11 @@ $.fn.sticky = function(parameters) { module.debug('Binding element to bottom of parent container'); module.remove.offset(); $module - .css('left' , '') - .css('top' , '') - .css('margin-bottom' , module.cache.context.bottomPadding) + .css({ + left : '', + top : '', + marginBottom : module.cache.context.bottomPadding + }) .removeClass(className.fixed) .removeClass(className.top) .addClass(className.bound) @@ -539,10 +557,14 @@ $.fn.sticky = function(parameters) { fixTop: function() { module.debug('Fixing element to top of page'); + module.set.minimumSize(); module.set.offset(); $module - .css('left', module.cache.element.left) - .css('bottom' , '') + .css({ + left : module.cache.element.left, + bottom : '', + marginBottom : '' + }) .removeClass(className.bound) .removeClass(className.bottom) .addClass(className.fixed) @@ -553,10 +575,14 @@ $.fn.sticky = function(parameters) { fixBottom: function() { module.debug('Sticking element to bottom of page'); + module.set.minimumSize(); module.set.offset(); $module - .css('left', module.cache.element.left) - .css('bottom' , '') + .css({ + left : module.cache.element.left, + bottom : '', + marginBottom : '' + }) .removeClass(className.bound) .removeClass(className.top) .addClass(className.fixed) @@ -792,20 +818,41 @@ $.fn.sticky.settings = { verbose : true, performance : true, + // whether to stick in the opposite direction on scroll up pushing : false, + context : false, + + // Context to watch scroll events scrollContext : window, + // Offset to adjust scroll offset : 0, + + // Offset to adjust scroll when attached to bottom of screen bottomOffset : 0, + jitter : 5, // will only set container height if difference between context and container is larger than this number + + // Whether to automatically observe changes with Mutation Observers observeChanges : false, + // Called when position is recalculated onReposition : function(){}, + + // Called on each scroll onScroll : function(){}, + + // Called when element is stuck to viewport onStick : function(){}, + + // Called when element is unstuck from viewport onUnstick : function(){}, + + // Called when element reaches top of context onTop : function(){}, + + // Called when element reaches bottom of context onBottom : function(){}, error : {