● sticky

position 속성값이 sticky일 때는 스크롤하는 중에 일정 지점(임계점)이 되면 요소가 fixed 값처럼 작동합니다. 기존 코드에서 초록색 요소의 position 속성값을 sticky로 바꾸고 좌표 속성은 top 속성값만 0으로 지정합니다.

.green-box{
  background-color:green;
  position:sticky;
  top:0;
}

그림 6-53 실행결과

실행결과를 보면 요소들이 static 값일 때처럼 표시됩니다. 그러나 웹 브라우저를 스크롤해 보면 화면에서 사라지는 빨간색과 파란색 요소와 다르게 초록색 요소는 top 속성값이 0인 위치에 고정되어 있습니다.