Sticky 스티커(고정 메모)

원문 보기 위키 갱신 2026.10.11

스티커(고정) 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

사용자가 화면을 스크롤할 때, 특정 영역의 내용이 문단이나 브라우저 가시 영역에 계속 보이게 하고 싶을 때 사용해요.

기본 사용법

:::demo 기본 컨테이너는 부모 요소예요

<template>
  <div style="height: 400px">
    <d-sticky :view="view" :zIndex="zIndex" @statusChange="statusChangeHandler">
      <p>基本用法</p>
    </d-sticky>
  </div>
</template>

<script>
export default {
  setup(props) {
    const view = {
      top: 100,
      bottom: 0
    }
    const zIndex = 1000

    function statusChangeHandler(status) {
      console.log('status =', status)
    }

    return {
      view,
      zIndex,
      statusChangeHandler
    }
  }
}
</script>

:::

컨테이너 지정하기

:::demo

<template>
  <div style="height: 200px">
    <d-sticky :view="view" :container="container">
      <p>指定容器</p>
    </d-sticky>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'
export default {
  setup(props) {
    let state = reactive({
      container: null
    })
    const view = {
      top: 100,
      bottom: 0
    }
    onMounted(() => {
      state.container = document.getElementsByClassName('container')[0]
    })
    return {
      view,
      ...toRefs(state)
    }
  }
}
</script>

:::

스크롤 컨테이너 지정하기

:::demo

<template>
  <div style="height:200px; overflow-y: scroll; " class="scrollTarget">
    <div style="height: 1000px">
      <d-sticky :view="view" :scrollTarget="scrollTarget">
        <p>指定滚动容器</p>
      </d-sticky>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'

export default {
  setup(props) {
    let state = reactive({
      scrollTarget: null
    })
    const view = {
      top: 100,
      bottom: 0
    }
    onMounted(() => {
      state.scrollTarget = document.getElementsByClassName('scrollTarget')[0]
    })
    return {
      view,
      ...toRefs(state)
    }
  }
}
</script>

:::

API

파라미터	타입	기본값	설명	Demo 링크
zIndex	`number`	--	선택, 래퍼 레이어 z-index 지정. 플로팅 시 z축 스택 제어용	기본 사용법
container	`Element`	부모 컨테이너	선택, 트리거 컨테이너. 부모 컨테이너와 달라도 됨	컨테이너 지정
view	`{top?:number,bottom?:number}`	`{top:0,bottom:0}`	선택, 가시 영역 조정용. 예: 상단 고정 헤더 등. 값은 가려진 상단 또는 하단 높이에 대응	기본 사용법
scrollTarget	`Element`	document.documentElement	선택, 스크롤이 발생할 컨테이너 설정. 일반적으로 스크롤바가 있는 컨테이너이며, 메인 페이지 스크롤바면 설정 불필요	스크롤 컨테이너 지정

d-sticky 이벤트

이벤트	타입	설명	Demo 링크
statusChange	`string`	선택, 상태 변경 시 트리거. 값은 변경 후 상태 값	기본 사용법

더 알아보기 (Learn more)

스크롤해도 화면에 붙어 있는 콘텐츠를 만들 때 쓰는 컴포넌트예요. container와 scrollTarget으로 붙을 컨테이너와 스크롤 주체를 직접 지정할 수 있어요.