[CSS] position : sticky 속성 - 요소를 스크롤에 따라오게 만들기

sticky는 영어로 '끈적끈적하다'라는 형용사입니다. position : sticky로 설정하면 끈적끈적하다는 말처럼 스크롤을 계속해서 따라오는 html요소를 생성할 수 있는데요. sticy position으로 설정되어 있는 요소는 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 이전 포스팅에서 배웠던 fixed position처럼 작동합니다. 아래 예시를 보시면 이해가 빠르실 겁니다.

 

 position : sticky 사용법 

See the Pen position : sticky by wjdxo513 (@wjdxo513) on CodePen.

• top : 상단에서 픽셀만큼 요소를 아래에 고정시킵니다.
• right : 우측에서 픽셀만큼 요소를 왼쪽에 고정시킵니다.
• left : 좌측에서 픽셀만큼 요소를 오른쪽에 고정시킵니다.
• bottom : 하단에서 픽셀만큼 요소를 위쪽에 고정시킵니다.

 

위의 예제를 보시면 sticky position의 동작방식은 아래와 같이 작동하는 것을 보실 수 있습니다.

 

sticky position의 동작 방식

1. 브라우저가 처음 랜더링 되었을 때 sticky 요소는 문서 흐름에 따라 일반적인 위치에 배치됩니다.
2. 스크롤이 지정된 위치에 도달할 때까지 sticky 요소는 일반적인 흐름대로 따라 이동합니다.
3. 스크롤의 좌표가 지정된 위치에 도달하면 sticky 요소가 지정된 위치에 고정됩니다.
4. 이제 지정된 위치 이하로 스크롤해도 해당 위치에 고정되어 유지됩니다.

위의 예제에서 스크롤을 내려보시면 한 곳에 고정되어 있는 파란색의 fixed position 박스와는 달리 붉은색 sticky position 박스는 스크롤을 하지 않을 때는 일반적인 static position인 녹색 box처럼 동작하다가 스크롤을 하면 sitcky 박스가 fixed position인 하늘색 box처럼 동작되는 것을 보실 수 있습니다.

 

sitcky는 이렇게 화면에 고정되는 기능이 있기 때문에 top, right, bottom, left 중 하나 이상의 속성을 사용하여 고정된 위치를 설정하여야 합니다. top이나, bottom은 아래로 스크롤했을 때, right와 left는 좌우로 스크롤했을 때 동작합니다. 예를 들어 top:0;이라고 지정해 주면 스크롤되는 동안 상단에 고정됩니다. 

 

 

일부 영역에서만 sticky position 동작하기

See the Pen position : sticky2 by wjdxo513 (@wjdxo513) on CodePen.

 

브라우저를 기준으로 위치가 고정되는 fixed position과는 달리 sticky position은 부모 요소 안에서만 고정되어 스크롤을 따라 움직이게 됩니다. 그래서 sitcky position을 사용하는 요소의 위치에 따라 동작하는 범위를 지정할 수도 있는데요. 위의 예제를 보시면 첫 번째 하늘색 area1안에 sticky box가 위치해 있기 때문에 핑크색 area2에서는 sticky box가 동작하지 않는 것을 보실 수 있습니다.

 

 

sitcky를 활용한 슬라이드 영역 만들기

See the Pen Sticky Sections (Pure CSS) by alphardex (@alphardex) on CodePen.

 

position: sticky를 사용하면 슬라이드 영역, 헤더, 사이드바, 고정된 테이블 헤더 등과 같은 요소를 만들 수 있습니다. 이를 통해 웹 사이트를 방문하는 사용자들의 사용성을 향상하고 페이지 내에서 중요한 내용을 계속해서 표시할 수 있게 해 줍니다.

 

 

 position : sticky가 동작하지 않을 때 확인해봐야 할 사항들 

sticky 요소의 위치를 1개 이상 지정해야 한다

.sticky {
  position: sticky;
   /* 위치 속성 중 1개 이상 필수 */
  top: 0;
  right: 0;
  left: 0;
  bottom 0;
}

"position: sticky"를 사용하기 위해서는 sticky가 선언된 요소에 위치를 지정해야 합니다. top, right, bottom, left와 같은 위치 속성을 사용하여 고정될 위치를 지정되었는지 확인이 필요합니다.

 

부모 요소에 overflow 속성이 적용되어 있으면 동작하지 않는다

.parent {
  overflow: hidden;
  overflow: scroll;
  overflow: auto;
}

부모 요소에 overflow 속성이 적용되어 있다면 sticky를 사용할 수 없습니다. 특히 가로에 스크롤이 생기는 것을 방지하기 위해 최상단 컴포넌트에 overflow-x:hidden과 같은 설정을 추가하는 경우가 종종 있는데 이런 경우에 가로로 스크롤되는 상황은 막을 수 있겠지만 position:sticky는 사용이 불가능합니다.

 

부모 요소의 높이가 설정되어 있지 않은 경우에 동작하지 않는다.

.parent {
  height: auto;
  height: unset;
  height: 100vh;
  height: 1000px;
  height: 5em;
}

"position: sticky"는 스크롤 컨테이너의 경계에서 동작합니다. 따라서 부모 요소에 스크롤 가능한 영역이 있어야 합니다. 부모 요소가 높이를 가지지 않거나, 스크롤 컨테이너가 부모 요소의 크기를 초과하는 경우에는 "position: sticky"가 동작하지 않을 수 있습니다. 부모 요소에 충분한 높이를 지정하거나, 내부 콘텐츠가 스크롤 가능한 높이를 가지도록 설정해야 합니다. 추가로 부모의 높이를 %로 지정했을 때도 sticky가 동작하지 않습니다.

 

※ 참고로 body 같은 경우 자동으로 height를 잡아주기 때문에 sticky 요소 부모가 body라면 높이를 설정을 해 줄 필요는 없습니다.

 

브라우저 지원 여부 확인

position: -webkit-sticky; /*13 미만 사파리 지원 추가*/

"position: sticky"는 모든 브라우저에서 완전히 지원되는 것은 아닙니다. IE 11 이하 버전에서는 지원하지 않고 다른 구형 브라우저에서는 일부 제한이 있을 수 있습니다. 따라서 해당 브라우저에서 지원 여부를 확인해야 합니다. 13 미만의 Safari에서 sticky를 사용하려면 위와 같이 -webket이라는 사파리 벤더 접두사를 붙여주셔야 합니다.