CSS4

스크롤 시 고정

position : sticky

• static = 스크롤 내리면 넘어감 ( 기본값 )
• sticky = 스크롤 내리다가 정해진 좌표에서 고정
• fixed = 스크롤 내려도 정해진 좌표에서 고정

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

sticky position의 동작 방식

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

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

예를 들어 top: 0; 이라고 지정해주면 스크롤 되는 동안 상단에 고정됩니다.

특정 상황 부여

<div class = "container">
    <div class = "area1">
      <div class = "sticky"> sticky </div>
    </div>
    <div class = "area2"></div>
  </div>

.area1{
  height : 1500px;
  background-color : skyblue;
}

.area2{
  height : 1500px; 
  background-color : pink;
}

.sticky{
  position : sticky; 
  top : 10px;
  left : 10px; 
  width : 100px;
  height :100px; 
  background-color : red;
}

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

• sticky 요소의 위치를 1개 이상 지정해야 한다.
• 부모 요소에 overflow 속성이 적용되어 있으면 동작하지 않는다.
• 부모 요소의 높이가 설정되어 있지 않은 경우에 동작하지 않는다.