Affix 고정

스크롤이 임계값에 도달하면 요소를 뷰포트 상단이나 하단에 고정합니다. 상단 고정 도구 모음에 자주 사용됩니다.

고정

<template>
  <div class="demo-col" style="max-width: 640px">
    <p class="demo-note">아래 컨테이너 안에서 스크롤하면 상단 고정 막대가 위에서 12px 지점에 고정됩니다</p>
    <div ref="scroller" class="anchor-scroller">
      <div v-for="i in 12" :key="i" class="anchor-sec">
        <h3>제{{ i }}단</h3>
        <p>위아래로 스크롤하여 상단 고정 막대의 동작을 확인하세요.</p>
      </div>
    </div>
    <LhAffix :target="scrollerEl" :offset-top="12">
      <div class="affix-bar">상단 고정 막대(offsetTop=12)</div>
    </LhAffix>
    <p class="demo-note">Affix는 스크롤 컨테이너 바깥이자 컨테이너 뒤에 배치해야 하며, 스크롤 시 자동으로 fixed로 전환됩니다.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    scrollerEl: undefined,
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
offsetTop	뷰포트 상단에서 몇 px 지점에 상단 고정을 트리거할지	number	—
offsetBottom	뷰포트 하단에서 몇 px 지점에 하단 고정을 트리거할지 (offsetTop보다 우선)	number	—
target	스크롤을 감시할 컨테이너 (선택자 또는 요소, 기본값 뷰포트)	string \| HTMLElement	—
sx	sx 레이아웃 단축 프로퍼티	—	—

팁

target은 스크롤 가능한 컨테이너(overflow: auto)여야 합니다. 고정 콘텐츠가 컨테이너의 가시 영역을 벗어나면 Affix가 컨테이너 가장자리에 잘릴 수 있으므로, 콘텐츠 높이는 간결하게 유지하세요.