Floating Navbar

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6export interface FloatingNavbarProps extends React.HTMLAttributes<HTMLElement> {
7  /** The consumer's own nav content — logo, links, actions. This component is a shell only. */
8  children: React.ReactNode
9  /** Scrollable container to track; omit to track the window. */
10  target?: React.RefObject<HTMLElement | null>
11  /** Top-of-page exemption band in px — while scroll position is within it, the bar always stays visible. */
12  threshold?: number
13}
14 
15function getScrollTop(target?: React.RefObject<HTMLElement | null>) {
16  const el = target?.current
17  return el ? el.scrollTop : window.scrollY
18}
19 
20/**
21 * A sticky header that hides on scroll-down and reappears on scroll-up, so long
22 * reading surfaces (articles, docs, feeds) get the vertical space back without
23 * losing the nav entirely. Direction is derived from a ref-held previous
24 * scrollTop, not React state, so the high-frequency scroll math never re-renders.
25 */
26export const FloatingNavbar = React.forwardRef<HTMLElement, FloatingNavbarProps>(
27  ({ children, target, threshold = 80, className, ...props }, ref) => {
28    const [hidden, setHidden] = React.useState(false)
29    const lastY = React.useRef(0)
30 
31    // Passive scroll listener, throttled to one direction check per frame via rAF.
32    // setHidden only ever runs inside the rAF callback, never synchronously in the effect body.
33    React.useEffect(() => {
34      lastY.current = getScrollTop(target)
35      let raf = 0
36 
37      const tick = () => {
38        raf = 0
39        const y = getScrollTop(target)
40 
41        if (y <= threshold) {
42          // Top-of-page exemption: never hide inside the band, no direction math needed.
43          setHidden(false)
44          lastY.current = y
45          return
46        }
47 
48        const delta = y - lastY.current
49        // Direction jitter guard — sub-8px wobble (trackpads, momentum scroll) is
50        // ignored and keeps accumulating against the same reference point.
51        if (Math.abs(delta) < 8) return
52        setHidden(delta > 0)
53        lastY.current = y
54      }
55 
56      const onScroll = () => {
57        if (raf) return
58        raf = requestAnimationFrame(tick)
59      }
60 
61      // Container + window, same lesson as scroll-to-top: a target container may
62      // not be scrollable yet at mount time, so both sources stay wired.
63      const node = target?.current ?? null
64      const sources: EventTarget[] = node ? [node, window] : [window]
65// … truncated