스티키
스티키 (Sticky)
페이지의 다른 열 콘텐츠가 보이는 동안 콘텐츠를 브라우저 뷰포트에 고정해 두는 컴포넌트예요. 사이드 레일이나 열에서 자주 쓰여요.
출처: 문서
본문
소개 (Introduction)
Sticky 콘텐츠는 페이지에 다른 열의 콘텐츠가 보이는 동안 브라우저 뷰포트에 고정되어 있어요.
예시 (Examples)
인접 컨텍스트에 붙기 (Sticking to Adjacent Context)
Sticky 콘텐츠는 지나갈 때 뷰포트에 붙고, 이 고정 콘텐츠가 지나간 컨텍스트의 아래쪽 가장자리와 부딪힐 때까지 뷰포트에 고정된 채 유지돼요. 추가 정적 콘텐츠는 스티키 콘텐츠 위에 존재해도 그 위치에 영향을 주지 않아요.
$('.ui.sticky')
.sticky({
context: '#example1'
})
;
Stuck Content
Stuck Content
푸싱 (Pushing)
pushing: true로 지정하면 스크롤 방향에 따라 뷰포트가 스티키 콘텐츠를 "밀어"요. 아래로 스크롤할 때 콘텐츠는 뷰포트 상단에 붙지만, 반대 방향으로는 콘텐츠가 뷰포트 하단에 붙어요.
$('.ui.sticky')
.sticky({
context: '#example2',
pushing: true
})
;
Stuck Content
Stuck Content
큰 콘텐츠 (Oversized Content)
뷰포트보다 큰 스티키 콘텐츠는 컨텍스트와 독립적으로 자동으로 스크롤되며, 언제든 스크롤 방향을 바꾸면 고정 콘텐츠의 스크롤 위치도 즉시 조정돼요.
$('.ui.sticky')
.sticky({
context: '#example3'
})
;
Long Stuck Content
Followup Article
By Author
Followup Article
By Author
Followup Article
By Author
Followup Article
By Author
Followup Article
By Author
Followup Article
By Author
Followup Article
By Author
Followup Article
By Author
Followup Article
By Author
Short Stuck Content
자신의 컨텍스트에 붙기 (Sticking to Own Context)
컨텍스트가 지정되지 않은 스티키 콘텐츠는 현재 컨텍스트에 스스로 붙을 수도 있지만, 콘텐츠와 겹침 문제가 발생할 수 있어요.
Content that sticks to its own context will adjust its own layout when being "stuck". You can fix layout issues caused by this reflow by adding styles to the next element after a ui fixed sticky
.ui.fixed.sticky + p {
margin-top: 39px;
}
$('.ui.sticky')
.sticky()
;
Tab 1
Tab 2
Tab 3
자신의 컨텍스트에 붙는 콘텐츠는 "고정"될 때 자신의 레이아웃을 조정해요. 이 리플로우로 인한 레이아웃 문제는 ui fixed sticky 다음 요소에 스타일을 추가해 고칠 수 있어요.
사용법 (Usage)
초기화 (Initializing)
Sticky는 뷰포트에 고정되어야 할 콘텐츠에서 초기화돼요. 대부분의 인스턴스는 스티키 요소의 위·아래 경계를 정의할 보조 컨텍스트를 지정해야 해요. 스티키 콘텐츠는 포함하는 요소 안에 있어야 해요. 이 컨테이너는 ui rail이거나 사용자의 임의 컨테이너일 수 있지만, 컨텍스트와 평행하게 존재해야 해요.
Sticky does not work in tables without using table-layout: fixed to prevent automatic resizing with content
$('.ui.sticky')
.sticky({
context: '#context'
})
;
테이블에서는 콘텐츠에 따른 자동 크기 조정을 막기 위한 table-layout: fixed를 사용하지 않으면 Sticky가 동작하지 않아요.
캐시된 값 새로 고치기 (Refreshing Cached Values)
Sticky 콘텐츠는 초기화 시 페이지에서의 현재 오프셋과 다른 중요한 값을 캐시해요. 이렇게 하면 브라우저 스크롤마다 DOM을 쿼리해야 하는(성능을 크게 떨어뜨리는) 일을 막아줘요.
Loading images without specified size
Setting CSS which adjusts the layout of the page
Hiding elements using Javascript
// recalculates offsets
$('.ui.sticky')
.sticky('refresh')
;
크기가 지정되지 않은 이미지 로딩, 페이지 레이아웃을 조정하는 CSS 설정, Javascript로 요소 숨기기가 발생하면 캐시된 값이 오래되었을 수 있어요. refresh 동작으로 오프셋을 다시 계산하세요.
스티키 조건 (Sticky Conditions)
스티키 콘텐츠는 자신의 position: relative 컨테이너 안에 있어야 하며, 이 컨테이너는 스티키 컨텍스트이거나 컨텍스트 요소와 세로 위치를 공유해야 해요.
Class
Description
Fixed Top
ui fixed top sticky
Element is fixed to top of viewport
Fixed Bottom
ui fixed bottom sticky
Element is fixed to bottom of viewport
Bound Top
ui bound top sticky
Element is bound to the top of its containing element (usually rail or column)
Bound Bottom
ui bound bottom sticky
Element is bound to the bottom of its containing element (usually rail or column)
Class / Description:
- ui fixed top sticky: 요소를 뷰포트 상단에 고정해요.
- ui fixed bottom sticky: 요소를 뷰포트 하단에 고정해요.
- ui bound top sticky: 포함 요소(보통 rail이나 column)의 상단에 바인딩해요.
- ui bound bottom sticky: 포함 요소(보통 rail이나 column)의 하단에 바인딩해요.
오프셋과 패딩 조정 (Adjusting Offset and Padding)
뷰포트에 고정된 콘텐츠가 있다면 상단 또는 하단 오프셋을 포함하는 것이 좋아요. 오프셋은 브라우저 상단과 지정된 값 사이의 콘텐츠와 겹치지 않도록 모든 값을 조정해요. bottomOffset은 뷰포트 하단에 고정된 콘텐츠에 대해 같은 일을 해요.
$('.ui.sticky')
.sticky({
offset : 50,
bottomOffset : 50,
context : '#element-to-follow'
})
;
Sticky 설정 (Sticky Settings)
스티키 동작을 구성하는 설정이에요.
Setting / Default / Description
pushing
false
요소가 뷰포트에 의해 "밀려" 스크롤 업 시 화면 하단에 붙을지 여부예요.
setSize
true
화면에 고정하기 전에 `fixed` 콘텐츠의 크기를 그 너비와 일치하도록 설정해요. fixed가 block이나 100% 너비 콘텐츠를 붙기 전과 다르게 표시할 수 있기 때문에 사용돼요.
jitter
5
컨테이너와 컨텍스트의 높이 차이가 이 jitter 값보다 클 때만 스티키 컨테이너 높이를 설정해요.
observeChanges
false
`context` DOM의 어떤 변경이 캐시된 스티키 위치를 자동으로 새로 고쳐야 할지 여부예요.
context
false
스티키 요소가 붙을 컨텍스트예요.
scrollContext
window
스티키가 `onscroll` 이벤트를 연결할 컨텍스트예요.
offset
0
요소를 뷰포트에 고정할 때 화면 상단에서의 픽셀 오프셋이에요.
bottomOffset
0
요소를 뷰포트에 고정할 때 화면 하단에서의 픽셀 오프셋이에요.
콜백 (Callbacks)
콜백은 특정 동작 이후에 실행할 함수를 지정해요.
Context / Description
onReposition
$module
레이아웃 변경으로 요소가 재배치될 때의 콜백이에요.
onScroll
$module
스크롤 핸들러에서 `requestAnimationFrame`이 실행될 때의 콜백이에요.
onStick
$module
요소가 페이지에 고정될 때의 콜백이에요.
onUnstick
$module
요소가 페이지에서 고정 해제될 때의 콜백이에요.
onTop
$module
요소가 부모 컨테이너의 상단에 바인딩될 때의 콜백이에요.
onBottom
$module
요소가 부모 컨테이너의 하단에 바인딩될 때의 콜백이에요.
DOM 설정 (DOM Settings)
DOM 설정은 이 모듈이 DOM과 어떻게 상호작용할지 지정해요.
Setting / Default / Description
namespace
sticky
이벤트 네임스페이스예요. 모듈 해제가 요소에 붙은 다른 이벤트에 영향을 주지 않게 해요.
className
className : {
bound : 'bound',
fixed : 'fixed',
supported : 'native',
top : 'top',
bottom : 'bottom'
}
상태에 스타일을 붙이는 데 사용되는 클래스 이름이에요.
디버그 설정 (Debug Settings)
디버그 설정은 콘솔의 디버그 출력을 제어해요.
Setting / Default / Description
name
Sticky
디버그 로그에서 사용되는 이름이에요.
silent
false
다른 디버그 설정과 관계없이 오류 메시지를 포함한 모든 콘솔 출력을 잠재워요.
debug
false
콘솔에 표준 디버그 출력을 제공해요.
performance
true
콘솔에 표준 디버그 출력을 제공해요.
verbose
false
콘솔에 보조 디버그 출력을 제공해요.
errors
error : {
visible : 'Element is hidden, you must call refresh after element becomes visible',
method : 'The method you called is not defined.',
invalidContext : 'Context specified does not exist',
elementSize : 'Sticky element is larger than its container, cannot create sticky.'
}