| 225 | }; |
| 226 | |
| 227 | export const handleHeaderFade = (scrollEl: HTMLElement, baseEl: HTMLElement, condenseHeader: HTMLElement | null) => { |
| 228 | readTask(() => { |
| 229 | const scrollTop = scrollEl.scrollTop; |
| 230 | const baseElHeight = baseEl.clientHeight; |
| 231 | const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0; |
| 232 | |
| 233 | /** |
| 234 | * If we are using fade header with a condense |
| 235 | * header, then the toolbar backgrounds should |
| 236 | * not begin to fade in until the condense |
| 237 | * header has fully collapsed. |
| 238 | * |
| 239 | * Additionally, the main content should not |
| 240 | * overflow out of the container until the |
| 241 | * condense header has fully collapsed. When |
| 242 | * using just the condense header the content |
| 243 | * should overflow out of the container. |
| 244 | */ |
| 245 | if (condenseHeader !== null && scrollTop < fadeStart) { |
| 246 | baseEl.style.setProperty('--opacity-scale', '0'); |
| 247 | scrollEl.style.setProperty('clip-path', `inset(${baseElHeight}px 0px 0px 0px)`); |
| 248 | return; |
| 249 | } |
| 250 | |
| 251 | const distanceToStart = scrollTop - fadeStart; |
| 252 | const fadeDuration = 10; |
| 253 | const scale = clamp(0, distanceToStart / fadeDuration, 1); |
| 254 | writeTask(() => { |
| 255 | scrollEl.style.removeProperty('clip-path'); |
| 256 | baseEl.style.setProperty('--opacity-scale', scale.toString()); |
| 257 | }); |
| 258 | }); |
| 259 | }; |
| 260 | |
| 261 | /** |
| 262 | * Get the role type for the ion-header. |