
w3.css
고정 요소
CSS를 사용하여 고정 요소를 만드는 방법을 알아보자.
스티키 엘리먼트
1단계) HTML 추가
<div class="sticky">I will stick to the screen when you reach my scroll position</div> <p>Some example text..</p>
2단계) CSS 추가
div.sticky { position: sticky; top: 0; }
기본 예시
예제 보기
position: sticky;는 사용자의 스크롤 위치를 기준으로 요소가 배치된다.
sticky 요소는 스크롤 위치에 따라 relative와 fixed 사이를 전환한다. 뷰포트에서 주어진 오프셋 위치가 충족될 때까지 상대적으로 배치되며 그런 다음 제자리에 “고정”(예: position:fixed)된다.
⭐ 고정 위치 지정이 작동하려면 top, right, bottom 또는 left 중 하나 이상을 지정해야 한다.
참고
W3C School - How TO - Sticky Element