sticky 가 동작하지 않을 때
sticky 에 대해서 알아본다.
개요
position : sticky는 굉장히 유용한 속성으로 최초에는 relative 같이 동작하다가, 스크롤 중 지정한 지점에서 요소를 고정 시키는 속성이다.
하지만 이따금 sticky 속성을 쓰다 보면, 원하는 대로 동작하지 않는 경우가 종종 있다. 이럴 때, 체크 해야 할 일종의 체크 리스트로써 이 글을 작성하고자 한다.
sticky
우선 position : sticky에 대해서 알아볼 필요가 있다. mdn 에서는 다음과 같이 설명하고 있다.
sticky
요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 `top`, `right`, `bottom`, `left`의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
이 값은 항상 새로운 쌓임 맥락을 생성합니다. 끈끈한 요소는 "스크롤 동작"(`overflow`가 `hidden`, `scroll`, `auto` 혹은 `overlay`)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "끈끈한" 동작을 보이지 않는 점에 주의하세요.
배치유형 - sticky
- **끈끈한 위치 지정 요소**는 `position`의 계산값이 `sticky`인 요소입니다. 평소에는 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값(`top` 등으로 지정)을 넘으면 마치 `fixed`처럼 화면에 고정합니다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됩니다.
한 마디로, 일반적인 요소처럼 동작하다, 지정된 위치를 넘어가게 스크롤이 된다면 fixed 처럼 붙어서 동작하는 방식이다. 물론 위치를 지정하기 위해 top, right, bottom, left 중 하나 이상의 속성을 사용하여 위치를 지정해야 한다.
그렇다면 정확하게 어떻게 동작하는 것일까? sticky는 다음과 같은 흐름에 따라 동작한다.
- 브라우저가 렌더링 되었을 때,
sticky요소는 문서 흐름에 따라 일반적인 위치에 배치된다. - 스크롤이 지정된 위치에 도달할 때까지 일반적인 흐름에 따른다.
- 스크롤이 지정된 위치에 도달하면,
fixed처럼 고정된다.
단 fixed 는 부모 요소와 관계없이 뷰포트를 기준으로 위치가 고정되지만, sticky는 부모 요소 안에서 고정된다는 차이점이 있기에 사용 시 유의해야 한다.
sticky가 동작하지 않을 때?
position: sticky는 특정 조건이 충족되지 않으면 예상대로 동작하지 않을 수 있다. 이를 해결하기 위해 다음 사항을 확인해야 한다.
- 부모 요소에
overflow속성이 지정되어 있는가?position: sticky는 부모 요소의overflow속성이visible이 아닐 경우 제대로 동작하지 않는다. 만약 부모 요소에overflow: hidden,overflow: scroll, 또는overflow: auto가 적용되어 있다면 sticky 효과가 사라질 수 있다.
- 부모 요소의 크기
fixed와는 다르게, 부모 요소의 영역을 벗어나면 동작하지 않는다. 따라서 부모 요소의 크기를 고려해야 한다.- 추가적으로, 부모 요소의 높이가 설정되어 있어야 한다. 단 %속성은 적용되지 않는다.
- 추신의 추신으로, body의 경우에는 자동으로 height를 잡아주므로, 따로 지정할 필요는 없다.
display속성 확인position: sticky는display: block또는display: inline-block요소에서만 적용된다.display: inline요소에는 적용되지 않으므로, 필요하다면block이나inline-block으로 변경해야 한다.