컴포넌트 갤러리쇼핑몰
고정 헤더
보통
•레이아웃Preview
기본 고정 헤더
로고
스크롤하면 헤더가 상단에 고정되고 스타일이 변경됩니다.
콘텐츠 아이템 1
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 2
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 3
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 4
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 5
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 6
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 7
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 8
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 9
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 10
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 11
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 12
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 13
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 14
스크롤 테스트를 위한 더미 콘텐츠입니다.
콘텐츠 아이템 15
스크롤 테스트를 위한 더미 콘텐츠입니다.
축소되는 헤더
브랜드명
슬로건이 여기에
투명 → 불투명 헤더
투명 헤더
히어로 영역 위에서는 투명, 스크롤 후 불투명해지는 헤더 패턴
다단계 고정 헤더
프롬프트
프롬프트 팁
- •sticky top-0으로 상단 고정
- •onScroll 이벤트로 스크롤 위치 감지
- •조건부 클래스로 스타일 변경
- •backdrop-blur로 배경 블러 효과
Tags
#sticky
#header
#scroll
#navigation
#layouts