[ css ] position: sticky가 안 먹는 경우, 적용 조건

기존에 스크립트를 이용해서 스크롤 이벤트로 만들었던 sticky 네비는

 

css에서 "position: sticky"을 쓰는 것만으로도 간단히 적용할 수 있는데,

 

가끔 요 스티키를 써도 안 먹는 경우가 있는데,

 

position: sticky가 동작이 안되는 경우, 아래 체크 리스트를 참고해!

 

 

티스토리 홈페이지 내 sticky 네비게이션 예시

 

check list

① sticky 속성을 준 엘리먼트에 top, left, right, bottom를 같이 줘야 함.

    → sticky는 top, left, right, bottom 중 하나 이상 같이 사용해야 한다.

 

② 부모 노드에 height를 확인해 보자.
    → height: OO%와 같이 퍼센트로 설정하면 동작하지 않음.
        (height: auto, height: OOpx, height: OOem, height: OOvh 등으로 사용)

 

③ 부모 / 조상 노드 overflow가 있는지 확인하자.

    →  css가 있는 경우 동작하지 않음