sticky를 넣었는데 붙지 않을 때: 부모의 스크롤과 남은 높이

top을 바꿔도 붙지 않는 사이드바가 있습니다

사이드바에 position:sticky와 top을 넣었는데 스크롤하면 그대로 사라질 수 있습니다. 요소의 위치값보다 먼저 확인할 것은 어느 조상이 스크롤의 기준이 되는지와 부모 안에 움직일 공간이 있는지입니다. top 숫자를 계속 키우면 원인을 숨긴 채 빈 여백만 늘어날 수 있습니다.

예제는 같은 길이의 내용을 가진 두 스크롤 영역을 나란히 둡니다. 한쪽은 안쪽 부모에 overflow:hidden이 있고, 다른 쪽은 그 제약이 없습니다. 두 영역을 각각 내려 보면 같은 sticky 선언도 기준이 달라질 수 있음을 확인할 수 있습니다.

가장 가까운 스크롤 메커니즘을 찾습니다

MDN의 position 안내는 sticky가 overflow:hidden·auto·scroll 등으로 스크롤 메커니즘을 가진 가까운 조상을 기준으로 붙는다고 설명합니다. 그 조상이 실제로 화면에서 스크롤되는 요소와 같지 않을 수 있다는 점이 중요합니다. 밖의 영역만 움직이는데 안쪽 부모를 기준으로 잡고 있는지 살펴야 합니다.

부모의 높이와 정렬을 같이 봅니다

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
}
.summary {
  position: sticky;
  top: 16px;
  align-self: start;
}

그리드나 플렉스 배치에서 사이드바가 긴 본문과 같은 높이로 늘어나면 부모 안에서 움직일 여유가 줄 수 있습니다. 이 예제는 요약을 내용 높이로 두려는 의도로 align-self:start를 사용합니다. 레이아웃의 실제 역할에 맞게 높이와 정렬을 정해야 합니다.

부모가 sticky 요소와 같은 높이뿐이라면 그 안에서 이동할 구간이 거의 없습니다. 고정할 요소가 화면보다 더 큰 경우에도 끝까지 읽을 방법을 생각해야 합니다. 붙는 모양만 만들려고 내용을 잘라내지 않습니다.

overflow를 지우기 전에 그 속성이 필요한 이유를 확인합니다

부모의 overflow:hidden이 둥근 모서리나 가로 넘침을 가리기 위해 들어갔을 수 있습니다. 해당 요소의 목적을 확인하지 않고 모두 visible로 바꾸면 다른 곳에서 문제가 생깁니다. 스크롤 컨테이너를 의도한 곳에 두거나, 잘라야 할 장식과 본문을 다른 요소로 나누는 방법을 검토합니다.

overflow:clip은 hidden과 달리 스크롤 컨테이너를 만들지 않는 경우가 있지만, 숨긴 조작 요소로 스크롤할 수 없다는 차이도 있습니다. 단지 sticky를 살리기 위해 교체하는 만능 값으로 쓰지 않습니다. 가로와 세로의 조합에 따라 계산된 값이 달라질 수 있으므로 개발 도구에서 실제 값을 읽습니다.

영역마다 내린 뒤 상대 위치를 비교합니다

예제의 두 영역을 내려 보고 제목 막대가 영역 위쪽에 남는지 확인합니다. 문서 전체가 아니라 내부 영역이 움직이는 조건입니다. 실제 사이트에서는 어느 스크롤 컨테이너를 사용했는지와 부모의 끝에 도달했을 때의 모습도 기록합니다.

sticky가 정상적으로 붙은 뒤 제목이나 초점이 가려지는 문제는 다른 단계입니다. 고정 헤더의 초점 가림처럼 붙는 기준과 읽을 수 있는 공간을 나눠 조사하면 엉뚱한 속성을 고치는 일을 줄일 수 있습니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문

• MDN: position
• MDN: overflow