[Web] Sticky를 이용해서 이미지는 가만히 있고 글만 움직이게

비교적 최신에 나온 css 기법이라고 한다.

 

사용법은 아주 간단하다.

position : sticky;

top : 10%;

 

이렇게 해주면 스크롤 내리다가 이미지가 top 10%가 되는 때에 고정된다.

그리고는 부모태그까지 스크롤이 끝나면 sticky가 해제된다.

 

position : fixed랑 비슷한데 조금 더 기능이 심화된 느낌이다.

 

See the Pen Untitled by Jirong (@jirongkim) on CodePen.