sticky가 안 되요

소소한 트러블 슈팅.

현재 진행하는 과제에서, 상단에 고정형 Header를 추가해달라는 요건이 있었음.
평소처럼 position:sticky를 사용했는데...적용이 안됨.

 

안 될 이유가 당장 없는데 안되서 당황함,

그래서 삽질을 좀 함.
그래서 정리를 함.

 

문제점

상위에 overflow에 대한 값이 있으면 적용되지 않음.

sticky는 상위 요소 중 하나라도 overflow 속성이 설정되어 있으면 작동하지 않음.
(ex. overflow로 hidden이나 auto, scroll등)

 

sticky는 뷰포트를 기준으로 top등의 값을 해석해서 노출하는 역할인데, 상위의 overflow 설정이 해당 영역을 또 다른 스크롤 컨테이너로 해석하기 때문이고, 이로 인해 sticky가 적용되는 뷰포트에 대한 해석이 달라지기 때문. 이번 과제에선 서비스 최상위의 스크롤에 대한 정의값이 있었고 그 아래아래아래아래아래....에 내 코드가 있으니 동작이 씹혔던 것.

 

해결법

아래와 같은 몇가지 대안이 있음

1. overflow의 기본값(visible) 유지. ...당연하지만 나는 적용 불가함

2. 상위를 overflow를 clip으로 정의

3. height 값 고정 (선정) -> 신규 지면의 최상단 스크롤을 설정하기에 높이가 변경될 일이 없고, 무엇보다 overflow clip을 설정함으로써 발생할 예상치 못 한 사이드 이펙트를 트래킹하기보다는, 이 방법이 좋다고 판단되어 적용함