1. Intro
동료 퍼블리셔분께서 parallax를 구현하시다가 persfective속성 사용시 position: fixed속성이 제대로 반영되지 않는 이슈에 막혀서 헬프를 외치셨고 sticky를 사용해서 해결해 나가 던 중 발견한 sticky의 성질에 대한 내용을 기록하고자 한다.
2. sticky?
sticky는 position속성의 속성값 중 하나이다. 스크롤 박스나 뷰포트의 특정 위치에 고정된다는 특성 때문에 fixed와 비슷해 보이지만 조건이 충족 될때만 고정되어 있는 재미있는 속성값이다. sticky는 두개의 좌표셋을 가지고 있다. 첫 번째 좌표는 display: static일 경우의 좌표(static 좌표라고 부를 예정)이고 두 번째 좌표는 top, left, bottom, right등에 입력한 좌표(fixed 좌표라고 부를 예정)이다. 따라서 다음 조건일 경우에 fixed좌표에 위치하고 아닐 경우에는 static좌표에 위치한다.
조건: 가장 가까운 부모 스크롤 박스(overflow: scroll/auto, 없으면 뷰포트, 뷰포트도 하나의 스크롤 박스임)의 임계점에 도달했을 경우.
여기서 임계점은 엘리먼트와 스크롤 박스의 거리(상하좌우)가 top, left, bottom, right 보다 작은 경우이며 단 엘리먼트는 가장 가까운 부모의 영역을 벗어날 수는 없다.
개념이 다소 복잡하지만 특정 영역 안에서만 fixed이고 싶을 경우 유용하게 사용된다. 또한 top과 bottom 속성을 동시에 사용 가능하고 left와 right속성을 동시에 사용 가능하다.
3. sticky가 적용되지 않는 경우
위에서 말했던 발견이란 position: sticky 엘리먼트의 부모 엘리먼트의 overflow속성이 hidden일 경우 fixed좌표가 아닌 계속 static좌표에 위치한다. 정확히 말하면 스크롤박스와 sticky엘리먼트 사이에 overflow: hidden인 엘리먼트가 존재할 경우 sticky 속성값이 무시된다. 왜 이렇게 만들었을까 고민해서 검색해 봤는데 정확한 이유는 찾기 힘들었고 스크롤 전파때문에 막아놓지 않았을까 하는 추측을 해본다.
