From 8c0eb9b00e28dada2b4aaa3792e89099743c675f Mon Sep 17 00:00:00 2001 From: Charles B Johnson Date: Thu, 24 Apr 2014 23:15:38 -0400 Subject: Refactor determining affix state into a separate expanded method in order to handle multiple edge cases, specifically when the document height is dynamic. Always reposition an affix that is affixed to the bottom. --- js/affix.js | 63 +++++++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 45 insertions(+), 18 deletions(-) (limited to 'js/affix.js') diff --git a/js/affix.js b/js/affix.js index 26b09db56..daebbffdd 100644 --- a/js/affix.js +++ b/js/affix.js @@ -37,6 +37,35 @@ target: window } + Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) { + var scrollTop = this.$target.scrollTop() + var position = this.$element.offset() + var targetHeight = this.$target.height() + + if (offsetTop != null && this.affixed == 'top') return scrollTop >= offsetTop ? false : 'top' + if (this.affixed == 'bottom') { + // Can be affixed to the top, use the unpin value + if (offsetTop != null) { + return (scrollTop + this.unpin <= position.top) ? false : 'bottom' + // Can only ever be pinned or affixed to the bottom, ignore unpin value + } else { + return (scrollTop + targetHeight <= scrollHeight - offsetBottom) ? false : 'bottom' + } + } else { + var initializing = this.affixed == null + var colliderTop = initializing ? scrollTop : position.top + var colliderHeight = initializing ? targetHeight : height + + if (offsetTop != null && colliderTop <= offsetTop) { + return 'top' + } else if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) { + return 'bottom' + } else { + return false + } + } + } + Affix.prototype.getPinnedOffset = function () { if (this.pinnedOffset) return this.pinnedOffset this.$element.removeClass(Affix.RESET).addClass('affix') @@ -53,8 +82,7 @@ if (!this.$element.is(':visible')) return var scrollHeight = $(document).height() - var scrollTop = this.$target.scrollTop() - var position = this.$element.offset() + var height = this.$element.height() var offset = this.options.offset var offsetTop = offset.top var offsetBottom = offset.bottom @@ -63,31 +91,30 @@ if (typeof offsetTop == 'function') offsetTop = offset.top(this.$element) if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.$element) - var affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? false : - offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' : - offsetTop != null && (scrollTop <= offsetTop) ? 'top' : false + var affix = this.getState(scrollHeight, height, offsetTop, offsetBottom) - if (this.affixed === affix) return - if (this.unpin != null) this.$element.css('top', '') + if (this.affixed != affix) { + if (this.unpin != null) this.$element.css('top', '') - var affixType = 'affix' + (affix ? '-' + affix : '') - var e = $.Event(affixType + '.bs.affix') + var affixType = 'affix' + (affix ? '-' + affix : '') + var e = $.Event(affixType + '.bs.affix') - this.$element.trigger(e) + this.$element.trigger(e) - if (e.isDefaultPrevented()) return + if (e.isDefaultPrevented()) return - this.affixed = affix - this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null + this.affixed = affix + this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null - this.$element - .removeClass(Affix.RESET) - .addClass(affixType) - .trigger(affixType.replace('affix', 'affixed') + '.bs.affix') + this.$element + .removeClass(Affix.RESET) + .addClass(affixType) + .trigger(affixType.replace('affix', 'affixed') + '.bs.affix') + } if (affix == 'bottom') { this.$element.offset({ - top: scrollHeight - this.$element.height() - offsetBottom + top: scrollHeight - height - offsetBottom }) } } -- cgit v1.2.3 From 724c4f526cd56a28bb305fe6f1f31f3091bf2cd6 Mon Sep 17 00:00:00 2001 From: Charles B Johnson Date: Fri, 18 Jul 2014 10:46:42 -0400 Subject: Fix issue where bottom affixed element floats over the footer when the document height is smaller than the viewport height. --- js/affix.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/affix.js') diff --git a/js/affix.js b/js/affix.js index daebbffdd..7f80041d5 100644 --- a/js/affix.js +++ b/js/affix.js @@ -81,7 +81,7 @@ Affix.prototype.checkPosition = function () { if (!this.$element.is(':visible')) return - var scrollHeight = $(document).height() + var scrollHeight = $('body').height() var height = this.$element.height() var offset = this.options.offset var offsetTop = offset.top -- cgit v1.2.3 From eff9b063da87c940d627745fe218a6c5435b69c1 Mon Sep 17 00:00:00 2001 From: fat Date: Mon, 21 Jul 2014 22:31:56 -0700 Subject: cleanup style --- js/affix.js | 41 +++++++++++++++++------------------------ 1 file changed, 17 insertions(+), 24 deletions(-) (limited to 'js/affix.js') diff --git a/js/affix.js b/js/affix.js index 7f80041d5..bd48fc2ca 100644 --- a/js/affix.js +++ b/js/affix.js @@ -38,32 +38,25 @@ } Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) { - var scrollTop = this.$target.scrollTop() - var position = this.$element.offset() - var targetHeight = this.$target.height() + var scrollTop = this.$target.scrollTop() + var position = this.$element.offset() + var targetHeight = this.$target.height() + + if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false - if (offsetTop != null && this.affixed == 'top') return scrollTop >= offsetTop ? false : 'top' if (this.affixed == 'bottom') { - // Can be affixed to the top, use the unpin value - if (offsetTop != null) { - return (scrollTop + this.unpin <= position.top) ? false : 'bottom' - // Can only ever be pinned or affixed to the bottom, ignore unpin value - } else { - return (scrollTop + targetHeight <= scrollHeight - offsetBottom) ? false : 'bottom' - } - } else { - var initializing = this.affixed == null - var colliderTop = initializing ? scrollTop : position.top - var colliderHeight = initializing ? targetHeight : height - - if (offsetTop != null && colliderTop <= offsetTop) { - return 'top' - } else if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) { - return 'bottom' - } else { - return false - } + if (offsetTop != null) return (scrollTop + this.unpin <= position.top) ? false : 'bottom' + return (scrollTop + targetHeight <= scrollHeight - offsetBottom) ? false : 'bottom' } + + var initializing = this.affixed == null + var colliderTop = initializing ? scrollTop : position.top + var colliderHeight = initializing ? targetHeight : height + + if (offsetTop != null && colliderTop <= offsetTop) return 'top' + if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom' + + return false } Affix.prototype.getPinnedOffset = function () { @@ -81,11 +74,11 @@ Affix.prototype.checkPosition = function () { if (!this.$element.is(':visible')) return - var scrollHeight = $('body').height() var height = this.$element.height() var offset = this.options.offset var offsetTop = offset.top var offsetBottom = offset.bottom + var scrollHeight = $('body').height() if (typeof offset != 'object') offsetBottom = offsetTop = offset if (typeof offsetTop == 'function') offsetTop = offset.top(this.$element) -- cgit v1.2.3