Glassy header with sticky hide and show on scroll

4/10/2022, 7:45:46 PM

by Leo Voon

Glassy effect – backdrop filter blur and decrease background opacity

Sticky – sticky top 0

Hide on scroll – transform-y-full to hide the header

Get window scrollY – hide when currentScrollY is greater than N and scroll direction is down

Get scroll direction down – previousScrollY is less than currentScrollY

let previousY: number
let currentY: number
let clientHeight: number
const deriveDirection = (y: number) => {
    const direction = !previousY || previousY < y ? 'down' : 'up'
    previousY = y
    return direction
}
$: scrollDirection = deriveDirection(currentY)
$: offscreen = scrollDirection === 'down' && currentY > clientHeight * 4

<header 
class:motion-safe:-translate-y-full={offscreen}
bind:clientHeight
>