애플 웹사이트의 제품 소개 페이지를 접속하면
웹페이지 스크롤시 특정 영역에서 더 이상 스크롤 되지 않으면서 제품 애니메이션이 실행되는 효과를 볼 수 있다.
이 같은 효과는 CSS의 position: sticky 효과가 기초가 되며, javascript의 도움을 받아 구현할 수 있다.
기초가 되는 CSS의 sticky효과는 아래와 같이 구현할 수 있다.



아래 예시와 같이
sticky가 적용될 엘리먼트에 position: sticky;를 부여하게 되면,
부모 엘리먼트의 top offset 부터 bottom offset 까지의 스크롤간
sticky 엘리먼트가 화면의 top 혹은 bottom 붙어 떨어지지 않게 된다.

이후 부모의 bottom offset을 벗어나면 비로소 자식 엘리먼트가 화면 위로 올라가게 된다.
예제는 아래와 같다.


[!]HTML[/!]
 
[!]CSS[/!]
 
부모 엘리먼트는 자식 엘리먼트의 height 보다 더 높아야 하며,
자식 엘리먼트에는 반드시 top 혹은 bottom이 부여되어야 한다.