상단에 고정되는 내비게이션. 스크롤하면 배경이 흐려지고 높이가 줄어든다. 모바일에서는 mobile-drawer 패턴과 연결할 수 있다.
이 페이지를 스크롤해 보세요. 헤더 배경이 유리처럼 흐려지고 높이가 살짝 줄어듭니다.
스크롤용 블록 1
스크롤 상태는 rAF로 스로틀하고, 임계값에 히스테리시스(켤 때 8px / 끌 때 4px)를 둬 경계에서 헤더가 떨리지 않게 했습니다.
스크롤용 블록 2
스크롤 상태는 rAF로 스로틀하고, 임계값에 히스테리시스(켤 때 8px / 끌 때 4px)를 둬 경계에서 헤더가 떨리지 않게 했습니다.
스크롤용 블록 3
스크롤 상태는 rAF로 스로틀하고, 임계값에 히스테리시스(켤 때 8px / 끌 때 4px)를 둬 경계에서 헤더가 떨리지 않게 했습니다.
스크롤용 블록 4
스크롤 상태는 rAF로 스로틀하고, 임계값에 히스테리시스(켤 때 8px / 끌 때 4px)를 둬 경계에서 헤더가 떨리지 않게 했습니다.
스크롤용 블록 5
스크롤 상태는 rAF로 스로틀하고, 임계값에 히스테리시스(켤 때 8px / 끌 때 4px)를 둬 경계에서 헤더가 떨리지 않게 했습니다.
스크롤용 블록 6
스크롤 상태는 rAF로 스로틀하고, 임계값에 히스테리시스(켤 때 8px / 끌 때 4px)를 둬 경계에서 헤더가 떨리지 않게 했습니다.
스크롤용 블록 7
스크롤 상태는 rAF로 스로틀하고, 임계값에 히스테리시스(켤 때 8px / 끌 때 4px)를 둬 경계에서 헤더가 떨리지 않게 했습니다.
스크롤용 블록 8
스크롤 상태는 rAF로 스로틀하고, 임계값에 히스테리시스(켤 때 8px / 끌 때 4px)를 둬 경계에서 헤더가 떨리지 않게 했습니다.
데스크톱 폭에서는 링크가 보이고, 좁아지면 햄버거로 바뀌어 mobile-drawer 패턴을 엽니다.