sticky 잘 알고 사용하기

position:sticky는 position:static 처럼 일반적인 흐름을 따르지만, 일정 스크롤을 내렸을 때 해당 임계점에 도달하였을 때, position:fixed 처럼 구현하기 위한 속성이다.

1
2
3
4
5
6
.sticky {
  position: -webkit-sticky; /* 사파리 브라우저 지원 */
  position: sticky;
  top: 4px;
  background: red;
}
  • sticky 속성을 설정하면 top, bottom, right, left 속성 중 하나는 반드시 설정해줘야한다.

또한 sticky가 기준으로 하는 임계점은 overflow:auto, overflow:scroll 속성을 가진 가장 가까운 조상 컨테이너 박스이다.

예시

1
2
3
4
5
6
7
8
9
10
11
<div class="scroll">
  <div class="parent">
    <b class="static">.static</b>
    <b class="sticky">.sticky</b>
    <b class="fixed">.fixed</b>
  </div>
  <div class="parent">
    <b class="static">.static</b>
    <b class="sticky">.sticky</b>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.scroll {
  display: inline-block;
  width: 200px;
  height: 400px;
  overflow: auto;
  padding: 0 4px;
  vertical-align: middle;
  border: 4px solid #000;
}
.parent {
  height: 300px;
  margin: 4px 0 200px;
  border: 4px solid #666;
}
.static {
  position: static;
  background: gray;
}
  • 위 코드에서 sticky가 fixed로 고정되는 임계기준점은 scroll 클래스를 가진 div 박스이다.
  • scroll 클래스가 있는 박스는 스크롤이 할 수 있을 만큼 길이가 길어서 스크롤 하여 해당 임계점에 도달하는 순간 fixed로 변하게 된다.

처음에 헷갈린 점은 overflow:auto 속성을 parent 클래스를 가진 박스로 옮겼는데 아무런 일도 일어나지 않아서 당황했다. 그 이유는 parent 클래스를 가진 박스 내부가 스크롤이 되었을 때 해당 박스를 기준으로 고정되는 것인데, parent 클래스를 가진 박스는 스크롤이 될만한 높이를 가지고 있지 않아서 아무런 일도 발생하지 않았던 것이다.