CSS Position Sticky

sticky로 독특한 인터렉션(구동효과) 주기

Dong-gri
Dong-gri
Aug 17 · 5 min read

요즘 새로 진행하고 있는 프로젝트의 마크업을 담당하면서, 랜딩 구동효과 구현을 위해 position의 sicky 속성을 사용하고 있습니다. sticky라는 속성이 있다는 것은 알았지만 어떻게 동작을 하는지, 또 어디다 사용할 수 있는지 몰랐었는데 이번에 활용하면서 다양한 인터렉션에 활용가능함을 알게 되었고 이에 대한 경험을 다른분들과 함께 나누고자 합니다.

sticky 는 뭐하는 속성일까?

웹페이지 스크롤 시, sicky가 적용된 엘리트먼트의 부모 요소의 height 범위 내에서는 fixed(고정)으로 작동되지만 그 외의 경우에는 static으로 동작하게 하는 속성입니다.

스크롤시에, 부모 범위안에서는 fiexd가 되고 그 밖의 범위에서는 fixed가 되지 않습니다.

이미지만으로 이해하기 어렵다면, code pen에 있는 예제로 직접 체험해볼 수 있습니다.

(CSS Position Sticky — How It Really Works!, Elad Shechter)

sticky를 사용할때의 큰 어려움은 없습니다. 고정시키고 싶은 요소에 다음과 같이 선언해주기만 하면 됩니다.

position: -webkit-sticky; 
position: sticky;

현 시점에서 모든 브라우저(ie미지원, edge 16이상)에서 지원하나, safari에서 그냥 sticky로는 적용이 불가능하기 때문에 -webkit- prefix를 추가로 붙였습니다. 참고로 부모 요소의 height 범위 내에서만 sticky가 동작하기 때문에 scroll이 가능할 만한 충분한 높이가 있어야합니다.

어떻게 활용가능한가요?

영문권 사이트의 예제는 과거 ios에서 많이 사용하던 알파벳(혹은 가나다) 카테고리 혹은 GNB&LNB로 가리킵니다. 이렇게만 보면 사용할 일이 생각보다 적겠구나 할 수 있겠지만 그렇지 않습니다. javascript로만 표현가능할 것 같은 인터렉션을 sticky로 쉽게 구현할 수 있습니다!

위 3개 예시 인터렉션 모두 CSS Sticky로 대체가능하지만, 아쉽게도 javascript를 사용해 구현되어 있습니다. (물론 fade in-out, 내용이 바뀌는 등의 구동은 javascript를 사용해야 합니다.)특히 lpoint의 경우 스크롤을 위아래로 바꿀때 튕기는 버그가 있는데 CSS Sticky를 활용한다면 쉽게 해결할 수 있습니다.

apple iPhone XS 프로모션

apple iPhone XS 프로모션 사이트의 일부분인데, 실제로 저 부분을 개발자도구를 사용해 살펴보면 sticky를 사용해 구현한 것을 볼 수 있습니다.


Sticky를 활용한 예시

git.dongri.me/example/sticky/

sticky를 이용한 예시를 제작했습니다. 스크롤 위치 (뷰포트 범위내에 특정 엘리트먼트가 존재하는지 여부)와 이미지 변경 및 슬라이드를 위한 Javascript만 사용되었을 뿐, 화면에 고정되는 효과는 sticky만 이용했습니다.

원래 jquey를 사용하다가, 제주도 코딩 베이스 캠프(제코배) 이후 dom만을 이용하려고 하다보니 많이 어렵기도 하고, 적응이 안되어 이미지 슬라이드 부분에 약간의 버그가 존재합니다. 그점은 감안하고 봐주시면 감사하겠습니다.

CSS만으로도 효과적인 구동효과(인터렉션)이 가능

이전에는 Javascript만을 사용해 하나하나 구현해야 했다면, 날이 갈 수록 CSS 의 성능과 다양한 속성들이 추가됨에 따라 CSS 만으로 효과적인 구동 인터렉션을 줄 수 있게 되었습니다.

완전히 Javascript를 배제하긴 어렵고, 브라우저 하위 호환성도 고려해야 하지만 국내 에이전시에서 구축한 사이트와 해외 웹 사이트들의 화려한 인터렉션을 살펴보며 CSS로 대체가능한 부분을 연구하면서 조금씩 활용한다면 좋을것 같습니다.

guleum

Dong-gri LAB

Dong-gri

Written by

Dong-gri

dongri.me

guleum

guleum

Dong-gri LAB

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade