CSS position:sticky 알아보기

position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성.

용어 정리

1. fixed 박스: position: fixed 속성을 적용한 박스.
2. sticky 박스: position: sticky 속성을 적용한 박스.
3. scroll 박스: overflow: auto 또는 overflow: scroll 속성을 적용한 가장 가까운 조상 박스.

 

sticky 박스의 특징

1. sticky 박스는 top, right, bottom, left 속성이 필수.
2. fixed 박스는 뷰포트에 고정하지만 sticky 박스는 scroll 박스에 고정한다. 즉, scroll 박스가 offset 기준이다.
3. 뷰포트와 scroll 박스가 동일한 것처럼 보이는 경우도 있겠지만 뷰포트는 하나뿐이고 scroll 박스는 문서 안에서 더 많이 생성할 수 있다.
4. sticky 박스를 scroll 박스에 고정하는 임계점은 스크롤 위치가 결정한다. sticky 박스 자신과 부모의 위치와 크기도 임계점에 영향을 미친다.
5. sticky 박스의 부모 박스가 scroll 박스를 벗어나면 sticky 박스는 다시 일반적인 흐름에 따른다. sticky 박스와 scroll 박스 사이에 overflow: hidden 속성을 적용한 박스가 끼어들면 sticky 박스는 일반적인 흐름에 따른다.

※ IE 11 브라우저와 안드로이드 4.x 이하 버전에서 지원하지 않는다!

---

  아직  호환성 때문인지 많이 쓰이지는 않는 듯 보이는데 유튜브에서 우연히 정보를 접하고 교양으로나마 잠시 알아보는 시간을 가졌다.  상용화 되면 탑바 고정하고 스크롤 할 때, 스크립트를 줄일 수 있으려나...

 

 

 

 

출처 : tech.lezhin.com/2019/03/20/css-sticky