From c8bbffd3baa9f05af49d2bc5f6dc419248b842f0 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 18 Apr 2016 15:28:25 +0100 Subject: [PATCH] fix: ensure position of sticky element stops at container bottom This fix sets the top to a maximum of the wrapper's container height, minus the height of the primary element. In other words, the primary cannot move beyond its parent container. This is truer to the behaviour of `position: sticky` in browsers that support it. --- src/sticky-position.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/sticky-position.js b/src/sticky-position.js index 841c051..f785aa2 100644 --- a/src/sticky-position.js +++ b/src/sticky-position.js @@ -20,7 +20,7 @@ export default function({ function stick() { if (isSticky === true) return; - primary.style.position = 'fixed'; + primary.style.position = 'absolute'; isSticky = true; } @@ -56,26 +56,24 @@ export default function({ } function update() { - const rect = wrapper.getBoundingClientRect(); - const sticky = rect.top < top; - + var rect = wrapper.getBoundingClientRect(); + var sticky = rect.top < top; + if (sticky) { placeholder.style.height = rect.height + 'px'; - + if (computeWidth) { placeholder.style.width = rect.width + 'px'; } - var parentRect = wrapper.parentNode.getBoundingClientRect(); - - primary.style.top = Math.min(parentRect.top + parentRect.height - rect.height, top) + 'px'; - primary.style.width = computeWidth ? rect.width+'px' : '100%'; - primary.style.left = rect.left + 'px'; - + var primaryRect = primary.getBoundingClientRect(); + primary.style.top = Math.min((rect.height - primaryRect.height), Math.max(Math.abs(rect.top), top)) + 'px'; + primary.style.width = computeWidth ? rect.width + 'px' : '100%'; + stick(); } else { unstick(); - } + } } function destroy() { @@ -98,4 +96,4 @@ export default function({ destroy, }; } -} \ No newline at end of file +}