okay, im somewhat happy with it

Author: hasparus

packages/web/docs/src/components/nested-sticky.tsx

@@ -35,9 +35,14 @@ export function NestedSticky({
 
     let width = 0;
     let height = 0;
-    let isSticky = false;
     let rafId: number | null = null;
 
+    // relative at the top
+    // fixed when we scroll
+    // absolute when we're near the bottom
+    let state: 'fixed' | 'absolute' | 'relative' = 'relative';
+    let prevState: 'fixed' | 'absolute' | 'relative' = 'relative';
+
     const measureDimensions = () => {
       const rect = sticky.getBoundingClientRect();
       width = rect.width;
@@ -48,13 +53,23 @@ export function NestedSticky({
     };
 
     const updateStyles = () => {
-      placeholder.style.height = isSticky ? `${height}px` : '0';
+      placeholder.style.height = state !== 'relative' ? `${height}px` : '0';
 
-      if (isSticky) {
+      if (state === 'fixed') {
         sticky.style.position = 'fixed';
         sticky.style.top = `${offsetTop}px`;
         sticky.style.width = `${width}px`;
         sticky.setAttribute('data-fixed', '');
+      } else if (state === 'absolute') {
+        const containerRect = container.getBoundingClientRect();
+        const stickyRect = sticky.getBoundingClientRect();
+
+        const relativeTop = stickyRect.top - containerRect.top;
+
+        sticky.style.position = 'absolute';
+        sticky.style.top = `${relativeTop}px`;
+        sticky.style.width = `${width}px`;
+        sticky.setAttribute('data-fixed', '');
       } else {
         sticky.style.position = 'relative';
         sticky.style.top = '';
@@ -74,13 +89,14 @@ export function NestedSticky({
 
         const shouldBeFixed = containerRect.top < offsetTop;
 
-        if (shouldBeFixed && parentRect.bottom < offsetTop + height + offsetBottom + 10) {
-          isSticky = false;
-        } else {
-          isSticky = shouldBeFixed;
-        }
+        const nearBottom = parentRect.bottom < offsetTop + height + offsetBottom + 10;
 
-        updateStyles();
+        state = shouldBeFixed && nearBottom ? 'absolute' : shouldBeFixed ? 'fixed' : 'relative';
+
+        if (state !== prevState) {
+          prevState = state;
+          updateStyles();
+        }
       });
     };
 

packages/web/docs/src/components/pricing/plans-table.tsx

@@ -345,7 +345,7 @@ function MobileNavbar({
         // --nextra-navbar-height
         64
       }
-      offsetBottom={256}
+      offsetBottom={427}
     >
       <div className="bg-beige-100 before:bg-beige-100 before:border-b-beige-400 relative top-0 z-10 w-full rounded-2xl p-2 duration-100 ease-[var(--hive-ease-overshoot-a-bit)] before:absolute before:inset-0 before:opacity-0 before:transition md:hidden [[data-fixed]>&:before]:scale-x-125 [[data-fixed]>&:before]:border-b [[data-fixed]>&:before]:opacity-100 [[data-fixed]>&:before]:shadow-sm">
         <div className="relative flex w-full">