x

apps/website/src/components/Navbar.tsx

@@ -101,16 +101,28 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
   }, [])
 
   useEffect(() => {
+    let accumulatedDelta = 0
+
     const onScroll = () => {
       const currentScrollY = window.scrollY
       const delta = currentScrollY - previousScrollY.current
 
       if (currentScrollY <= 20) {
         setScrollingDown(false)
-      } else if (delta > 4) {
-        setScrollingDown(true)
-      } else if (delta < -4) {
-        setScrollingDown(false)
+        accumulatedDelta = 0
+      } else {
+        // Reset accumulator if user reverses scroll direction
+        if ((delta > 0 && accumulatedDelta < 0) || (delta < 0 && accumulatedDelta > 0)) {
+          accumulatedDelta = 0
+        }
+        accumulatedDelta += delta
+
+        // Require 10px of deliberate scroll movement to prevent micro-jitter bounce
+        if (accumulatedDelta > 10) {
+          setScrollingDown(true)
+        } else if (accumulatedDelta < -10) {
+          setScrollingDown(false)
+        }
       }
 
       previousScrollY.current = currentScrollY
@@ -127,8 +139,13 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
 
     const updateNavBottom = () => {
       if (navElement) {
-        const bottom = navElement.getBoundingClientRect().bottom
+        const rect = navElement.getBoundingClientRect()
+        const bottom = Math.max(0, rect.bottom)
+        const height = navElement.offsetHeight || rect.height || 72
         document.documentElement.style.setProperty('--navbar-bottom', `${bottom}px`)
+        if (height > 0) {
+          document.documentElement.style.setProperty('--navbar-height', `${height}px`)
+        }
       }
     }
 

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -2525,7 +2525,7 @@ export default function DynamicPageRenderer({ sections, categories, lang: langPr
 
       if (needsTopSpacing && rendered) {
         return (
-          <div key={section.id} style={{ paddingTop: 'var(--navbar-bottom, 72px)' }} className="w-full">
+          <div key={section.id} style={{ paddingTop: 'var(--navbar-height, 72px)' }} className="w-full">
             {rendered}
           </div>
         )