Affix
스크롤 시 지정한 위치에 요소를 고정하는 컴포넌트입니다. 툴바·앵커 내비게이션·액션 버튼 등에 사용하며, data-target으로 스크롤 컨테이너를 지정할 수 있습니다.
기본
data-affix와 data-target으로 스크롤 영역을 연결합니다. 영역을 스크롤하면 .affix_target이 상단에 고정됩니다.
주문 상세 페이지입니다. 아래로 스크롤하면 액션 바가 상단에 고정됩니다.
배송지: 서울특별시 강남구 테헤란로 123, 4층
결제 수단: 신용카드 (일시불) · 주문 금액 ₩42,000
상품명: 무선 이어폰 Pro · 수량 1 · ₩39,000
배송비: ₩3,000 · 예상 도착: 2~3 영업일
요청 사항: 부재 시 경비실에 맡겨 주세요.
교환·반품은 수령 후 7일 이내 마이페이지에서 신청할 수 있습니다.
문의: 고객센터 1588-0000 (평일 09:00–18:00)
상단 오프셋
offsetTop으로 뷰포트(또는 컨테이너) 상단과의 간격을 지정합니다. 고정 헤더 아래에 붙일 때 사용합니다.
문서 편집 화면입니다. 스크롤 시 포맷 툴바가 상단에서 12px 떨어진 위치에 고정됩니다.
제목: 2024년 3분기 실적 보고서
작성자: 기획팀 · 최종 수정: 2024-08-15
1. 개요 — 본 보고서는 2024년 3분기 매출·비용·이익 현황을 요약합니다.
2. 매출 — 전년 동기 대비 12% 증가, 신규 고객 유입이 주요 성장 동력입니다.
3. 비용 — 마케팅 비용이 전분기 대비 8% 상승했습니다.
4. 전망 — 4분기 시즌 효과로 완만한 성장이 예상됩니다.
5. 부록 — 상세 표·차트는 별첨 자료를 참고하세요.
앵커 내비게이션
affix_anchor 스킨으로 섹션 앵커 링크를 고정합니다. 긴 문서·설정 페이지의 목차에 적합합니다.
설정 페이지입니다. 아래 목차가 스크롤 시 상단에 고정됩니다.
프로필 — 이름, 아바타, 소개 문구를 수정합니다.
보안 — 비밀번호 변경과 2단계 인증을 설정합니다.
알림 — 이메일·푸시·SMS 수신 여부를 관리합니다.
결제 — 등록된 카드와 청구 내역을 확인합니다.
모든 변경 사항은 저장 버튼을 눌러야 반영됩니다.
하단 고정
offsetBottom을 지정하면 요소가 컨테이너 하단에 고정됩니다. 모바일 하단 액션 바에 활용합니다.
장바구니입니다. 스크롤해도 결제 버튼이 하단에 고정됩니다.
무선 이어폰 Pro × 1 — ₩39,000
USB-C 케이블 × 2 — ₩12,000
보조배터리 10,000mAh × 1 — ₩29,000
배송비 — ₩3,000
쿠폰 할인 — −₩5,000
결제 수단은 다음 단계에서 선택합니다.
적립 예정 포인트: 780P
페이지 스크롤
target을 생략하면 window 스크롤을 기준으로 동작합니다. 이 섹션 아래로 페이지를 스크롤하면 배너가 상단에 고정됩니다.
아래 배너가 페이지 스크롤 시 상단(오프셋 64px)에 고정됩니다. 가이드 헤더 높이를 고려한 예시입니다.
페이지를 계속 스크롤하여 고정·해제 동작을 확인하세요.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
target | string | — | 스크롤 컨테이너 선택자 (data-target). 생략 시 window |
offsetTop | number | string | 0 | 상단 고정 시 상단 여백(px, data-offset-top) |
offsetBottom | number | string | — | 하단 고정 시 하단 여백(px, data-offset-bottom). 지정 시 하단 고정 모드 |
skin | '' | 'bar' | 'anchor' | — | affix_bar · affix_anchor 스킨 |
interactive | boolean | true | false면 data-affix 미부여(초기화 비활성) |
children | ReactNode | — | 고정 대상 콘텐츠 (라벨·버튼·앵커 링크 등) |
className | string | — | 루트 요소 추가 클래스 |
API · Children
| Prop / Children | 설명 |
|---|---|
children | 고정 대상 콘텐츠 (라벨·버튼·앵커 링크 등) |
API · Data Attributes
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
data-affix | boolean | — | Affix 활성화. 루트 .affix 요소에 지정 |
data-target | string | window | 스크롤 컨테이너 CSS 선택자. 생략 시 window 스크롤 기준 |
data-offset-top | number | 0 | 상단 고정 시 뷰포트·컨테이너 상단과의 간격(px) |
data-offset-bottom | number | 0 | 하단 고정 시 하단과의 간격(px). 속성을 지정하면 하단 고정 모드 |
Affix는 HTML 마크업 + JS 초기화 방식입니다. React 앱에서는 문서 로드 시 initAffixAll이 [data-affix] 요소를 자동 초기화합니다.
API · 마크업 구조
| 요소 | 설명 |
|---|---|
.affix | 루트 래퍼. data-affix · data-target · data-offset-* 속성을 지정 |
.affix_placeholder | 고정 시 레이아웃 점프 방지용 플레이스홀더 (aria-hidden="true", hidden) |
.affix_target | 실제 고정·해제되는 대상. affix_bar 또는 affix_anchor 스킨과 조합 |
클래스 · 스킨
OOCSS 구조 클래스와 스킨 클래스입니다. affix_bar-actions 안의 버튼은 Button 컴포넌트로 조합합니다.
| 클래스 | 설명 |
|---|---|
affix_bar | 액션 바 스킨. 라벨 + 버튼 영역 |
affix_bar-label | 바 좌측 라벨 |
affix_bar-actions | 바 우측 버튼 그룹. Button 컴포넌트 조합 |
affix_anchor | 섹션 앵커 링크 내비게이션 스킨 |
is-affixed | 고정 상태 (루트 .affix에 JS가 자동 추가) |
is-fixed | 고정 상태 (.affix_target에 JS가 자동 추가) |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--affix-z-index | 10 | 고정 바 z-index |
--affix-bar-gap | var(--space-sm) | 바 내부 간격 |
--affix-bar-padding-y · --affix-bar-padding-x | var(--space-sm) · var(--space-md) | 바 패딩 |
--affix-bar-bg | var(--color-surface) | 바 배경 |
--affix-bar-border | var(--color-border-subtle) | 바 테두리 |
--affix-bar-shadow | 0 1px 4px rgb(0 0 0 / 0.08) | 바 그림자 |