|
3 | 3 | --- |
4 | 4 |
|
5 | 5 | <header |
6 | | - class='mb-12 flex w-full flex-wrap pb-3 text-sm sm:flex-nowrap sm:justify-start' |
| 6 | + id='main-header' |
| 7 | + class='fixed top-0 z-50 mb-12 flex w-full flex-wrap bg-background/100 px-6 pb-3 pt-3 text-sm transition-transform duration-300 ease-in-out sm:flex-nowrap sm:justify-start sm:px-10 lg:px-10' |
7 | 8 | > |
8 | 9 | <nav |
9 | 10 | class='relative mx-auto flex w-full items-center justify-between' |
|
130 | 131 | }); |
131 | 132 | </script> |
132 | 133 |
|
| 134 | +<script> |
| 135 | + // Header scroll behavior |
| 136 | + let lastScrollTop = 0; |
| 137 | + let scrollThreshold = 50; // Minimum scroll distance to trigger |
| 138 | + let isScrolling = false; |
| 139 | + |
| 140 | + const header = document.getElementById("main-header"); |
| 141 | + |
| 142 | + function handleScroll() { |
| 143 | + if (!isScrolling) { |
| 144 | + window.requestAnimationFrame(() => { |
| 145 | + const currentScrollTop = |
| 146 | + window.pageYOffset || document.documentElement.scrollTop; |
| 147 | + |
| 148 | + // Show header when at top of page |
| 149 | + if (currentScrollTop <= 0) { |
| 150 | + header?.classList.remove("-translate-y-full"); |
| 151 | + isScrolling = false; |
| 152 | + return; |
| 153 | + } |
| 154 | + |
| 155 | + // Only trigger on significant scroll movement |
| 156 | + if (Math.abs(currentScrollTop - lastScrollTop) < scrollThreshold) { |
| 157 | + isScrolling = false; |
| 158 | + return; |
| 159 | + } |
| 160 | + |
| 161 | + if (currentScrollTop > lastScrollTop) { |
| 162 | + // Scrolling down - hide header |
| 163 | + header?.classList.add("-translate-y-full"); |
| 164 | + } else { |
| 165 | + // Scrolling up - show header |
| 166 | + header?.classList.remove("-translate-y-full"); |
| 167 | + } |
| 168 | + |
| 169 | + lastScrollTop = currentScrollTop; |
| 170 | + isScrolling = false; |
| 171 | + }); |
| 172 | + } |
| 173 | + isScrolling = true; |
| 174 | + } |
| 175 | + |
| 176 | + // Add scroll event listener with throttling |
| 177 | + window.addEventListener("scroll", handleScroll, { passive: true }); |
| 178 | + |
| 179 | + // Ensure header is visible on page load |
| 180 | + document.addEventListener("DOMContentLoaded", () => { |
| 181 | + header?.classList.remove("-translate-y-full"); |
| 182 | + }); |
| 183 | +</script> |
| 184 | + |
133 | 185 | <script> |
134 | 186 | function getCurrentTheme() { |
135 | 187 | return localStorage.getItem("theme"); |
|
0 commit comments