CSS) 스크롤 하는데 요소를 고정하고 싶다면 position:sticky

---

✅position:sticky

아래 예제를 살펴보자.

이미지가 3개가 세로로 나란히 있는데, 모든 이미지를 뷰포트에서 200px 위치에서 고정시키고 싶다면, position:sticky를 써보자

 

스크롤이 없을땐 3장의 이미지들이 나란히 보인다. (화면 비율을 30%까지 줄여서 억지로 스크롤을 없앴다)

스크롤을 다 내렸더니 3장의 이미지가 합쳐지고 뷰포트 기준으로 위에서 200px만큼 떨어진 위치에서 고정이 되있는 걸 볼수가 있다. 바로 position:sticky 속성 때문이다. 

//html

<div class="container">
  <div>
    <img src="https://images.unsplash.com/photo-1529171696861-bac785a44828?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" alt="">
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1496950866446-3253e1470e8e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
  </div>
</div>

 

//css

      .container{
        margin:200px 0;
        height:2000px;
        text-align:center;
        background:yellow;
      }
      .card-box{
        position:sticky;
        top:200px;
      }
      img{
        max-width:20%;
        margin-top:200px;
      }

✅position:sticky 특징

위 예제에서 살펴봤듯이 position:sticky 속성은 

스크롤이 없을때는 그냥 가만히 있다. 그런데 스크롤이 생기니까 top에서부터 얼마만큼 떨어진 위치에서 고정이 되어있고

더는 움직이지 않는다.

position:fixed가 되어있지 않은 다른 요소들은 스크롤이 내려가면 저절로 위로 올라가서 사라져버리는데

sticky를 적용한 애는 스크롤 할때마다 고정되어있다.

 

다시한번 정리하자면,

position:sticky는 뷰포트 상단 top 몇 픽셀을 지정해주면, 그 지정값으로 고정이 된다.

가변적으로 position:fixed가 되는 녀석이다. 

다만, 스크롤이 부모 박스를 넘어갈때는 fixed 상태가 해제가 돼서 고정이 되지 않는다.