[css] sticky 트러블슈팅

1. 브라우저 호환성 확인, 사파리경우(13미만) 접두사 사용 position: -webkit-sticky;

2. 임계값 설정여부 확인 (top, right, bottom, left 속성 중 하나 설정)

3. 상위 요소에 overflow 있는지 확인 overflow:hidden overflow:scroll overflow:auto
   (부모나 조상에 오버플로 속성이 존재하면 sticky는 동작하지 않음)

4. 바로 위 부모 요소에 height가 적용되어 있는지 확인(여기선 %값의 속성은 적용이 되지 않는다.)

• 부모 요소에 높이를 설정해야 스크롤 시 고정할 곳이 생김
• 부모한테 heigth가 없어도 왼쪽에 sticky, 오른쪽에 height 줘도 됌
• 부모보다 자식의 height가 크거나 작을때 안됌

height: 100%; /* % 속성은 적용 불가 */
height: auto; 
height: 100px;
height: 100vh;

// 오버플로 속성이 있는 상위 항목을 확인하기 위한 스니펫
let parent = document.querySelector('.sticky').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}