Block 01
여기까지 내려와도 헤더는 계속 따라옵니다
위로 살짝만 올려보세요. 헤더가 즉시 슥 내려옵니다. threshold=8px 히스테리시스로 미세한 떨림은 무시되도록 잡았어요.
AAcme
directionidle
Demo
스크롤 방향에 따라
헤더가 사라지고 나타나요
아래로 스크롤하면 상단 헤더가 슬쩍 숨겨지고, 다시 위로 스크롤하면 부드럽게 돌아옵니다. 모바일 브라우저에서 흔히 보는 그 인터랙션.
↓ 데모 영역 안에서 스크롤해 보세요
Block 02
Idle 상태 — 최상단에선 무조건 노출
topOffset(기본 64px) 이내로 올라오면 방향과 무관하게 'idle'로 강제. 사용자가 페이지 꼭대기에 있을 땐 헤더가 깜빡이지 않습니다.
Block 03
rAF 스로틀
scroll 이벤트는 빈번하게 발사되니 requestAnimationFrame으로 프레임당 한 번만 측정. listener는 passive:true.
Block 04
왜 IntersectionObserver가 아닌가
방향 자체는 위치의 시간 변화율이라 observer로 직접 잡기 어려워요. lastY를 ref로 들고 비교하는 게 가장 솔직한 구현.
Block 05
실무에서 가장 자주 쓰는 곳
모바일 앱 톤의 사이트(노션, 토스, 인스타그램 웹뷰 등)에서 본문에 집중할 때 헤더가 사라졌다가, 위로 의도 표현하면 다시 나타나는 흐름.
Block 06
주의 — sticky의 top이 0이어야 슬라이드가 자연스러움
top:auto나 top:N이면 -translate-y-full 후에도 일부가 보일 수 있어요. top-0 + translate 조합이 가장 안정적.
Block 07
더 내려와도 헤더는 안 보일 거예요
down이 유지되는 한 헤더는 위로 숨어 있습니다. 살짝 위로 올려 보세요.
Block 08
스크롤 다 끝났습니다
최상단으로 다시 돌아가면 idle → 헤더가 자리를 잡고 멈춥니다.