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

@@ -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,
 		};
 	}
-}
+}