|
| 1 | +/** |
| 2 | + * Sticky Sidebar Controller |
| 3 | + * |
| 4 | + * Provides direction-aware sticky sidebar behavior via JavaScript. |
| 5 | + * Handles both short sidebars (smaller than viewport) and tall sidebars |
| 6 | + * (taller than viewport) with different sticking strategies: |
| 7 | + * |
| 8 | + * SHORT SIDEBAR: Pins the sidebar's top edge below the scroll viewport's |
| 9 | + * top edge (with padding) as the user scrolls down. Returns to natural |
| 10 | + * position when the container scrolls back into view. |
| 11 | + * |
| 12 | + * TALL SIDEBAR: When scrolling down, allows the sidebar to scroll naturally |
| 13 | + * until its bottom edge reaches the viewport bottom (with padding), then |
| 14 | + * pins it there. When scrolling up, releases and scrolls naturally until |
| 15 | + * the top edge reaches the viewport top (with padding), then pins at top. |
| 16 | + * |
| 17 | + * The scroll container is always `#scroll-viewport`, which sits below the |
| 18 | + * header/progress bar in the flex layout. Its BCR top naturally accounts |
| 19 | + * for all fixed chrome above content. |
| 20 | + */ |
| 21 | +import { handleScriptError } from '@components/scripts/errors/handler' |
| 22 | + |
| 23 | +export interface StickySidebarOptions { |
| 24 | + /** Extra space below the scroll viewport's visible top edge (px). Default: 16 */ |
| 25 | + topPadding?: number |
| 26 | + /** Extra space above the scroll viewport's visible bottom edge (px). Default: 16 */ |
| 27 | + bottomPadding?: number |
| 28 | + /** Minimum window width to enable sticky behavior (px). Default: 1024 (lg breakpoint) */ |
| 29 | + minWidth?: number |
| 30 | +} |
| 31 | + |
| 32 | +/** |
| 33 | + * Initialize sticky sidebar behavior on a sidebar element within a container. |
| 34 | + * |
| 35 | + * @param sidebar - The element that should stick (e.g. `<aside>`, contact card) |
| 36 | + * @param container - The element whose height constrains the sidebar's vertical travel |
| 37 | + * @param options - Configuration for padding and breakpoint |
| 38 | + * @returns A cleanup function that removes listeners and resets positioning |
| 39 | + */ |
| 40 | +export function initStickySidebar( |
| 41 | + sidebar: HTMLElement, |
| 42 | + container: HTMLElement, |
| 43 | + options: StickySidebarOptions = {}, |
| 44 | +): () => void { |
| 45 | + const { |
| 46 | + topPadding = 16, |
| 47 | + bottomPadding = 16, |
| 48 | + minWidth = 1024, |
| 49 | + } = options |
| 50 | + |
| 51 | + const scrollContainer = document.getElementById('scroll-viewport') |
| 52 | + if (!scrollContainer) { |
| 53 | + return () => {} |
| 54 | + } |
| 55 | + |
| 56 | + let currentTranslateY = 0 |
| 57 | + let rafId: number | null = null |
| 58 | + // Capture scrollContainer in a const to satisfy strict null checks inside closures |
| 59 | + const scroller = scrollContainer |
| 60 | + |
| 61 | + /** |
| 62 | + * Compute and apply the correct translateY for the sidebar based on |
| 63 | + * the current scroll position and viewport dimensions. |
| 64 | + */ |
| 65 | + function update(): void { |
| 66 | + try { |
| 67 | + // Disable on narrow viewports (mobile drawer handles layout) |
| 68 | + if (window.innerWidth < minWidth) { |
| 69 | + if (currentTranslateY !== 0) { |
| 70 | + sidebar.style.transform = '' |
| 71 | + currentTranslateY = 0 |
| 72 | + } |
| 73 | + return |
| 74 | + } |
| 75 | + |
| 76 | + const sidebarRect = sidebar.getBoundingClientRect() |
| 77 | + const sidebarHeight = sidebarRect.height |
| 78 | + if (sidebarHeight === 0) return |
| 79 | + |
| 80 | + const containerRect = container.getBoundingClientRect() |
| 81 | + const viewportRect = scroller.getBoundingClientRect() |
| 82 | + |
| 83 | + // Sidebar's natural top position (without current transform applied) |
| 84 | + const naturalTop = sidebarRect.top - currentTranslateY |
| 85 | + |
| 86 | + // Maximum translateY: sidebar bottom must not exceed container bottom |
| 87 | + const maxTranslateY = Math.max(0, containerRect.bottom - (naturalTop + sidebarHeight)) |
| 88 | + |
| 89 | + // Visible bounds within the scroll viewport |
| 90 | + const visibleTop = viewportRect.top + topPadding |
| 91 | + const visibleBottom = viewportRect.bottom - bottomPadding |
| 92 | + const availableHeight = visibleBottom - visibleTop |
| 93 | + |
| 94 | + let newTranslateY: number |
| 95 | + |
| 96 | + if (sidebarHeight <= availableHeight) { |
| 97 | + // SHORT SIDEBAR: pin top edge at the visible top boundary |
| 98 | + newTranslateY = Math.max(0, visibleTop - naturalTop) |
| 99 | + } else { |
| 100 | + // TALL SIDEBAR: direction-aware pinning. |
| 101 | + // Top pin: sidebar top aligns with visibleTop |
| 102 | + const topPin = visibleTop - naturalTop |
| 103 | + // Bottom pin: sidebar bottom aligns with visibleBottom |
| 104 | + const bottomPin = visibleBottom - sidebarHeight - naturalTop |
| 105 | + |
| 106 | + // When the sidebar is taller than available space, topPin > bottomPin. |
| 107 | + // Clamping currentTranslateY between them gives us direction-aware |
| 108 | + // behavior: scrolling down hits the bottom pin, scrolling up hits the |
| 109 | + // top pin, and in between the sidebar scrolls naturally. |
| 110 | + newTranslateY = Math.max(bottomPin, Math.min(currentTranslateY, topPin)) |
| 111 | + } |
| 112 | + |
| 113 | + // Global clamp: never go above natural position or below container bottom |
| 114 | + newTranslateY = Math.max(0, Math.min(newTranslateY, maxTranslateY)) |
| 115 | + |
| 116 | + // Apply only when value changes meaningfully (avoid sub-pixel jitter) |
| 117 | + if (Math.abs(newTranslateY - currentTranslateY) > 0.5) { |
| 118 | + sidebar.style.transform = `translateY(${Math.round(newTranslateY)}px)` |
| 119 | + currentTranslateY = newTranslateY |
| 120 | + } |
| 121 | + } catch (error) { |
| 122 | + handleScriptError(error, { |
| 123 | + scriptName: 'stickySidebar', |
| 124 | + operation: 'update', |
| 125 | + }) |
| 126 | + } |
| 127 | + } |
| 128 | + |
| 129 | + /** Debounced scroll handler using requestAnimationFrame */ |
| 130 | + function onScroll(): void { |
| 131 | + if (rafId !== null) cancelAnimationFrame(rafId) |
| 132 | + rafId = requestAnimationFrame(() => { |
| 133 | + rafId = null |
| 134 | + update() |
| 135 | + }) |
| 136 | + } |
| 137 | + |
| 138 | + scroller.addEventListener('scroll', onScroll, { passive: true }) |
| 139 | + window.addEventListener('resize', onScroll, { passive: true }) |
| 140 | + |
| 141 | + // Initial positioning |
| 142 | + update() |
| 143 | + |
| 144 | + return () => { |
| 145 | + scroller.removeEventListener('scroll', onScroll) |
| 146 | + window.removeEventListener('resize', onScroll) |
| 147 | + if (rafId !== null) cancelAnimationFrame(rafId) |
| 148 | + sidebar.style.transform = '' |
| 149 | + currentTranslateY = 0 |
| 150 | + } |
| 151 | +} |
0 commit comments