CSS Position Sticky 문제 해결하기

Sticky는 생각처럼 동작하지 않는 경우가 많습니다. 다음 체크리스트를 이용해 일반적인 트러블슈팅 방법을 알아봅시다.

원문 : https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working#checking-if-a-parent-element-is-a-flexbox

How to Fix Issues With CSS Position Sticky Not Working?

CSS position:sticky 속성이 동작하지 않는 데에는 여러 가지 이유가 있을 수 있습니다.
다음 체크리스트를 이용해 몇 가지 일반적인 / 잠재적인 문제를 해결할 수 있습니다.

1. 브라우저 호환성 확인하기

브라우저 호환성 확인하기

---

2. 임계값 설정여부 확인

임계값을 설정했는지 확인하세요.

즉, 다음 속성 중 하나 이상에 대해 "auto" 이외의 값을 설정해야 합니다.

• top
• right
• bottom
• left

sticky 요소가 지정된 임계값을 넘지 않으면 상대적으로 위치한 요소로 동작합니다.

.sticky {
    position: sticky;
    top: 0;
}

---

3. 사파리 벤더 접두사

13 미만의 Safari 버전을 지원하려면 필요합니다.

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

---

4. 상위 요소에 oveflow 속성이 있는지 확인

부모나 조상(parent/ancestor)에 다음 오버플로 속성이 존재하면, sticky는 동작하지 않습니다.

(해당 overflow 컨테이너의 높이가 명시적으로 선언되어 있으면 동작함)

1. overflow: hidden
2. overflow: scroll
3. overflow: auto

오버플로 속성이 있는 상위 항목을 확인하기 위한 스니펫

let parent = document.querySelector('.sticky').parentElement;

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

오버플로와 sticky 같이 활용하는 방법 

ovrerflowing 컨테이너에 높이를 지정합니다.

---

5. 부모 요소에 height 속성 설정 여부 확인

부모 요소에 높이를 설정해야 스크롤 시 고정할 곳이 생깁니다.

sticky는 컨테이너 높이 내 고정/스크롤을 의미합니다.

---

6. 부모가 Flexbox인지 확인

sticky 요소의 부모가 flexbox인 경우 확인해야 할 두 가지 시나리오가 있습니다.

• sticky 요소의 align-self: auto 선언
• sticky 요소의 align-self: stretch 선언

sticky 요소의 align-self: auto 선언이 있는 경우

이 경우 align-self의 값은 부모의 align-items 값으로 계산됩니다.

따라서 부모에 align-items: normal(기본값) 또는 align-items: stretch 속성이 있는 경우,

sticky 요소의 높이가 사용 가능한 전체 공간을 채우기 위해 늘어납니다.

이는 부모 내에서 스크롤할 공간을 남기지 않습니다.

sticky 요소의 align-self: strech 선언이 있는 경우

이 경우 고정 요소는 부모 요소의 높이까지 늘어나며 이 때문에 스크롤할 공간이 없습니다.

flexbox와 sticky 같이 사용하기

align-self 속성의 값을 align-self: flex-start로 간단히 설정할 수 있습니다.
이렇게 하면 sticky 요소가 시작 부분에 놓이고 늘어나지 않습니다.