Position Sticky VS Fixed

Sticky

Position이 sticky인 요소로 평소에는 static으로 처리되지만 가장 가까운, 스크롤 되는 조상의 컨테이너 블록을 기준으로 자신이 지정한 임계값을 넘으면 fixed 처럼 화면에 고정된다.

임계값을 넣지 않으면 static과 다를 바 없다. 그렇기에 top, bottom, right, left 중 하나는 꼭 입력해주어야 한다. 

sticky 예제

static처럼 처리되다가 top: 20px에 도달하는 순간 fixed처럼 화면에 고정되어 있는 것을 확인할 수 있다.

그러나 전체 페이지에서 fixed 처럼 되는 것은 아니고 조상 컨테이너의 내용이 모두 스크롤되어 화면에서 사라진다면 sticky 요소도 화면 밖으로 나간다.

Fixed

Position이 Fixed인 요소로 absolute와 비슷하지만, 컨테이닝 블록이 다르다.

Fixed는 뷰포트를 기준으로 삼아 배치한다. 따라서 스크롤에 상관 없이 화면의 해당 지점에 고정되어 있다.

 

 

직접 스크롤 해보고 작성해보려면 아래의 사이트를 이용하면 된다.

https://jsfiddle.net/daehwan/xk0od1av/28/

Edit fiddle - JSFiddle - Code Playground

위의 사이트의 예제를 참고하면 해당 말이 무슨 뜻인지 정확히 이해할 수 있다.

 

 

 

 

출처

https://velog.io/@1703979/TIL-14

https://developer.mozilla.org/ko/docs/Web/CSS/position