Component Gallery쇼핑몰
Sticky Header
Medium
•LayoutsPreview
기본 고정 헤더
로고
스크롤하면 헤더가 상단에 고정되고 스타일이 변경됩니다.
콘텐츠 아이템 1
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 2
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 3
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 4
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 5
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 6
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 7
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 8
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 9
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 10
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 11
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 12
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 13
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 14
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 15
스크롤 테스트를 위한 더미 콘텐츠입니다.
축소되는 헤더
브랜드명
슬로건이 여기에
투명 → 불투명 헤더
투명 헤더
히어로 영역 위에서는 투명, 스크롤 후 불투명해지는 헤더 패턴
다단계 고정 헤더
Prompt
Prompt Tips
- •Fix to top with sticky top-0
- •Detect scroll position with onScroll event
- •Change styles with conditional classes
- •Background blur with backdrop-blur
Tags
#sticky
#header
#scroll
#navigation
#layouts