정의
position: sticky속성을 적용한 박스는 평소에 문서 안에서position: static상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면position: fixed와 같이 박스를 화면에 고정할 수 있는 속성
특징
- sticky 박스는 top, right, bottom, left 속성이 필수
- fixed 박스는 뷰포트에 고정하지만 sticky 박스는 scroll 박스에 고정합니다. 즉, scroll 박스가 offset 기준
- 뷰포트와 scroll 박스가 동일한 것처럼 보이는 경우도 있겠지만 뷰포트는 하나뿐이고 scroll 박스는 문서 안에서 더 많이 생성할 수 있다
- sticky 박스를 scroll 박스에 고정하는 임계점은 스크롤 위치가 결정합니다. sticky 박스 자신과 부모의 위치와 크기도 임계점에 영향을 미침
- sticky 박스의 부모 박스가 scroll 박스를 벗어나면 sticky 박스는 다시 일반적인 흐름에 따름
- sticky 박스와 scroll 박스 사이에 overflow: hidden 속성을 적용한 박스가 끼어들면 sticky 박스는 일반적인 흐름에 따름
:D