[CSS] position sticky 알고 사용하기🤔

CSS position: sticky

sticky는 top 과 left 지정으로 위치를 지정할 수 있습니다. 처음에는 relative이다가, viewport의 상단 부분과 sticky 요소의 top 설정 픽셀 만큼되면, 그 때 부터는 fixed로 position이 동작합니다.

 

그래서, 일정만큼 스크롤을 내리다 보면, 갑자기 화면에 고정되는 요소들을 보실 수 있습니다.

 

 

 

🥵제가 개발하면서 발생한 문제

저는 한 참 스크롤을 내린 뒤에  원하는 offsetY에서 sticky가 fixed되기를 원했습니다. 그럴 생각으로  sticky 요소에 top 픽셀을 fixed될 offsetY 픽셀을 설정했습니다.

아래 코드가 그랬습니다.

 

 

 

그런데, 스크롤을 내리면, sticky요소가 그냥 fixed로 작동했습니다. 

원인은 이미 처음부터 top으로 지정한 픽셀값이 충족되어서 sticky요소가 fixed로 변했기 때문이었습니다.

 

 

 

✅   해결 방법

margin-top sticky요소를 미리 viewport 상단으로부터 떨어뜨려 놓은 뒤에, top을 설정하시면 됩니다.

.sticky {
  position: sticky;
  top: 10px;
  margin-top: 220px;
  background-color: red;
}

margin-top 설정이 필요한 이유는 원하는 스크롤 부분부터 sticky 요소가 딸려서 내려가게 하기위해서 margin을 추가했습니다.

실제로 sticky설정에서 top 설정은 viewport의 상단으로부터의  top을 설정한 픽셀까지 거리가 되면, sticky요소가 fixed로 position이 변경됩니다. 그런데, margin-top을 사용하지 않고, 90px로 top의 픽셀을 너무 많이 설정해 버리면, fixed로 바로 움직여버립니다.

그래서 margin-top으로 요소를 원하는 위치마큼 조정한 후에 top으로 viewport의 상단과 얼만큼 픽셀이 벌어졌을 때, 내릴 지를 결정하면 원하는데로 동작을 줄 수 있습니다.