한 줄 요약
sticky는 평소엔 흐름대로 있다가, 정해 둔 위치에 닿으면 그 자리에 붙어서 따라옵니다.
비유로 이해하기
책에 꽂아 둔 책갈피를 떠올려 보세요. 책장을 넘기기 전에는 그냥 그 페이지에 있지만, 책장을 넘기면 위쪽에 걸려서 계속 보입니다. 그리고 책(부모 상자)이 끝나면 책갈피도 함께 사라지죠.
position: sticky는 relative와 fixed의 중간입니다. 스크롤하다가 top: 0처럼 정해 둔 위치에 닿는 순간부터 붙어서 따라오고, 부모 상자가 끝나면 같이 밀려 올라갑니다.
비교해 보기
- fixed: 처음부터 끝까지 화면에 붙어 있음.
- sticky: 기준선에 닿으면 붙고, 부모 영역 안에서만 따라옴.
- sticky는
top같은 기준선을 반드시 적어야 작동합니다.
직접 실행해 보기
결과 창을 스크롤해 보세요. 각 장의 제목이 위에 붙어 따라오다가, 다음 장이 오면 밀려납니다. top: 0을 지우면 sticky가 작동하지 않는 것도 확인해 보세요.
GenerateBlocks에서는
독립학교 사이트의 헤더와, 홈 화면 ‘작게 시작해서 끝까지 완성합니다’ 섹션의 왼쪽 제목이 sticky입니다. GenerateBlocks에서는 Position을 Sticky로 고르고 Top 값을 꼭 함께 입력하세요.
참고: MDN: position · Ahmad Shadeed: Using Position Sticky With CSS Grid · CSS-Tricks: position