()
| 55 | } |
| 56 | |
| 57 | function updateHeaderStyles() { |
| 58 | if (!headerRef.current) { |
| 59 | return |
| 60 | } |
| 61 | |
| 62 | const { top, height } = headerRef.current.getBoundingClientRect() |
| 63 | const scrollY = clamp( |
| 64 | window.scrollY, |
| 65 | 0, |
| 66 | document.body.scrollHeight - window.innerHeight |
| 67 | ) |
| 68 | |
| 69 | if (isInitial.current) { |
| 70 | setProperty('--header-position', 'sticky') |
| 71 | } |
| 72 | |
| 73 | setProperty('--content-offset', `${downDelay}px`) |
| 74 | |
| 75 | if (isInitial.current || scrollY < downDelay) { |
| 76 | setProperty('--header-height', `${downDelay + height}px`) |
| 77 | setProperty('--header-mb', `${-downDelay}px`) |
| 78 | } else if (top + height < -upDelay) { |
| 79 | const offset = Math.max(height, scrollY - upDelay) |
| 80 | setProperty('--header-height', `${offset}px`) |
| 81 | setProperty('--header-mb', `${height - offset}px`) |
| 82 | } else if (top === 0) { |
| 83 | setProperty('--header-height', `${scrollY + height}px`) |
| 84 | setProperty('--header-mb', `${-scrollY}px`) |
| 85 | } |
| 86 | |
| 87 | if (top === 0 && scrollY > 0 && scrollY >= downDelay) { |
| 88 | setProperty('--header-inner-position', 'fixed') |
| 89 | removeProperty('--header-top') |
| 90 | removeProperty('--avatar-top') |
| 91 | } else { |
| 92 | removeProperty('--header-inner-position') |
| 93 | setProperty('--header-top', '0px') |
| 94 | setProperty('--avatar-top', '0px') |
| 95 | } |
| 96 | } |
| 97 | |
| 98 | function updateAvatarStyles() { |
| 99 | if (!isHomePage) { |
no test coverage detected