[CSS] position: sticky

 

▶ position: sticky

- 스크롤 영역을 기준으로 배치

- top/left/right/bottom 중 특정한 값이 하나 이상 존재해야 하고 그렇게 부여된 값이 스크롤 영역에 맞닿았을 경우에만 동작함. 
- Internet Explorer 지원 불가.

 

 

[사용 예시]

position: sticky; 사용 예시

- position: sticky가 적용된 타이틀 부분이 스크롤을 내릴 때 화면 상단에 고정된 채 같이 내려오다 section이 끝나면 멈추고, 이후 section 영역이 달라지면 해당 section의 타이틀이 스크롤을 따라 내려옴.

- 이전에는 javascript를 통해 상당히 어렵게 구현되던 기능이었으나 sticky 사용 시 이와 같이 구현 가능.

 

 

- 스크롤되는 영역을 기준으로 배치하기 때문에 viewport 전체에 고정하는 개념처럼도 보일 수 있음.

- 하지만 viewport도 하나의 스크롤 영역이라고 가정한다면 이와 같이 특정한 범위를 잡아 만들 수도 있음.

  - .container로 전체 section을 감쌈.
  - overflow는 넘치는 부분을 어떻게 처리할 것인지 설정.
    - overflow: auto 지정 시 넘치는 부분들은 일단 보이지 않게 처리됨.

    - 넘친 부분은 .container 안에 들어가고 그 내부에서 스크롤 할 수 있게 됨.
    - 그 내부에서 position: sticky 동작.
  - position: sticky는 스크롤되는 영역 전체의 어딘가에 특정한 요소를 붙여 동작하는 것으로 스크롤과 연관이 깊은 속성의 값.