Affix

Affix (고정 요소)

출처: 문서

요소를 특정 보이는 영역에 고정해요.

Affix는 기본적으로 페이지 상단에 고정돼요. offset 속성을 설정해서 상단 오프셋을 바꿀 수 있는데, 기본값은 0이에요.

target 속성을 설정하면 affix를 항상 해당 컨테이너 안에 유지할 수 있어요. 범위를 벗어나면 숨겨져요. 컨테이너에는 스크롤바가 없도록 주의해 주세요.

.affix-container {
  text-align: center;
  height: 400px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
}

affix 컴포넌트는 top과 bottom 두 가지 고정 위치를 제공해요. position 속성으로 고정 위치를 바꿀 수 있고, 기본값은 top이에요.

Name	Description	Type	Default
offset	오프셋 거리	number	0
position	affix의 위치	enum	top
target	대상 컨테이너 (CSS 셀렉터)	string	—
z-index	affix의 z-index	number	100
teleported 2.13.0	affix 요소를 텔레포트할지 여부, true면 append-to가 지정하는 곳으로 텔레포트돼요	boolean	false
append-to 2.13.0	affix 요소가 붙는 대상 요소	CSSSelector / HTMLElement	body

Name	Description	Type
change	고정 상태가 바뀌면 실행돼요	Function
scroll	스크롤할 때 실행돼요	Function

Name	Description
default	기본 내용을 커스터마이즈해요

Name	Description	Type
update	affix 상태를 수동으로 갱신해요	Function
updateRoot	rootRect 정보를 갱신해요	Function