| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
target | string | — | 스크롤 컨테이너 선택자 (data-target). 생략 시 window |
offset-top | number | string | 0 | 상단 고정 시 상단 여백(px, data-offset-top) |
offset-bottom | number | string | — | 하단 고정 시 하단 여백(px, data-offset-bottom). 지정 시 하단 고정 모드 |
skin | '' | 'bar' | 'anchor' | — | affix_bar · affix_anchor 스킨 |
interactive | boolean | true | false면 data-affix 미부여(초기화 비활성) |
Affix
스크롤 시 지정한 위치에 요소를 고정하는 Nuxt 컴포넌트입니다. 툴바·앵커 내비게이션·액션 버튼 등에 사용하며, target으로 스크롤 컨테이너를 지정할 수 있습니다.
기본
target으로 스크롤 영역을 연결합니다. 영역을 스크롤하면 .affix_target이 상단에 고정됩니다.
주문 상세 페이지입니다. 아래로 스크롤하면 액션 바가 상단에 고정됩니다.
배송지: 서울특별시 강남구 테헤란로 123, 4층
결제 수단: 신용카드 (일시불) · 주문 금액 ₩42,000
상품명: 무선 이어폰 Pro · 수량 1 · ₩39,000
배송비: ₩3,000 · 예상 도착: 2~3 영업일
요청 사항: 부재 시 경비실에 맡겨 주세요.
교환·반품은 수령 후 7일 이내 마이페이지에서 신청할 수 있습니다.
문의: 고객센터 1588-0000 (평일 09:00–18:00)
주문 메모 · 선물 포장 · 세금계산서 요청
관련 상품 · 최근 본 상품 · 위시리스트
상단 오프셋
offset-top으로 뷰포트(또는 컨테이너) 상단과의 간격을 지정합니다. 고정 헤더 아래에 붙일 때 사용합니다.
문서 편집 화면입니다. 스크롤 시 포맷 툴바가 상단에서 12px 떨어진 위치에 고정됩니다.
제목: 2024년 3분기 실적 보고서
작성자: 기획팀 · 최종 수정: 2024-08-15
1. 개요 — 본 보고서는 2024년 3분기 매출·비용·이익 현황을 요약합니다.
2. 매출 — 전년 동기 대비 12% 증가, 신규 고객 유입이 주요 성장 동력입니다.
3. 비용 — 마케팅 비용이 전분기 대비 8% 상승했습니다.
4. 전망 — 4분기 시즌 효과로 완만한 성장이 예상됩니다.
5. 부록 — 상세 표·차트는 별첨 자료를 참고하세요.
6. 참고 — 내부 지표 정의와 집계 기준은 별도 문서를 따릅니다.
7. 문의 — 지표 해석은 기획팀으로 연락해 주세요.
앵커 내비게이션
affix_anchor 스킨으로 섹션 앵커 링크를 고정합니다. 긴 문서·설정 페이지의 목차에 적합합니다.
설정 페이지입니다. 아래 목차가 스크롤 시 상단에 고정됩니다.
프로필 — 이름, 아바타, 소개 문구를 수정합니다.
보안 — 비밀번호 변경과 2단계 인증을 설정합니다.
알림 — 이메일·푸시·SMS 수신 여부를 관리합니다.
결제 — 등록된 카드와 청구 내역을 확인합니다.
모든 변경 사항은 저장 버튼을 눌러야 반영됩니다.
연동 계정 · 로그인 기록 · 세션 관리
데이터 내보내기 · 계정 삭제 요청
하단 고정
offset-bottom을 지정하면 요소가 컨테이너 하단에 고정됩니다. 모바일 하단 액션 바에 활용합니다.
장바구니입니다. 스크롤해도 결제 버튼이 하단에 고정됩니다.
무선 이어폰 Pro × 1 — ₩39,000
USB-C 케이블 × 2 — ₩12,000
보조배터리 10,000mAh × 1 — ₩29,000
배송비 — ₩3,000
쿠폰 할인 — −₩5,000
결제 수단은 다음 단계에서 선택합니다.
적립 예정 포인트: 780P
무료 배송 기준 · 오늘 도착 가능 여부
장바구니에 담은 상품은 30일간 보관됩니다.
페이지 스크롤
target을 생략하면 window 스크롤을 기준으로 동작합니다. 이 섹션 아래로 페이지를 스크롤하면 배너가 상단에 고정됩니다.
아래 배너가 페이지 스크롤 시 상단(오프셋 64px)에 고정됩니다. 가이드 헤더 높이를 고려한 예시입니다.
페이지를 계속 스크롤하여 고정·해제 동작을 확인하세요.
API · Props
API · Slots
| 슬롯 | 설명 |
|---|---|
default | 고정 대상 콘텐츠 (라벨·버튼·앵커 링크 등) |
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). 속성을 지정하면 하단 고정 모드 |
HTML 마크업에서는 JS 초기화 방식을 사용합니다. Nuxt 앱에서는 컴포넌트가 initAffix를 자동으로 관리하며, 일반 문서 로드 시 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) | 바 그림자 |