position sticky! - 순수 CSS 상단고정 네비게이션

첫 화면에서는 네비게이션 메뉴가 화면 중간에 존재하다가, 스크롤을 내리면 화면 최상단에 딱 달라붙어 따라오는 경우를 보셨을 겁니다. 

 

아래와 같은 경우인데요, 한 번 직접 스크롤 해 보세요.

 

 

위 기능을 구현하려면 자바스크립트로 스크롤할때마다 해당 엘리먼트의 offset 좌표와 스크롤위치를 비교합니다. 

어려운 것은 아니지만 굉장히 거추장스러운 작업인데요.

 

CSS의 position 에 sticky 라는 것을 사용하면 단 2줄로 구현할 수 있습니다. 

자바스크립트를 단 한 줄도 쓰지 않구요.

position: sticky; 
top: 0; 

아래에서 테스트 해보세요.

 

 

아마 제대로 작동하지 않는 분들도 계실 텐데요 (IE는 아마 jsFiddle 자체가 작동하지 않으실 겁니다.) 

caniuse.com 을 보면 IE 에서는 완전히 지원하지 않는 모습을 보이네요. 

 

IE11조차 전혀 지원이 안되는 것을 보면 우리나라에서는 그냥 없다고 생각하는게 편할 수도 있겠습니다만

모바일쪽을 보시면 거의 대부분의 점유율을 차지하는 크롬, 사파리, 삼성인터넷 브라우저 등이 모두 sticky를 지원하므로 모바일 전용 웹페이지를 생각하신다면 고려할만한 가치가 있다고 봅니다. 

 

네비게이션뿐만 아니라 옆에 따라다니는 배너 등에도 쉽게 적용할 수 있겠습니다. 

 

내부적으로 처음 자바스크립트로 구현했던 기능이 작동하는 것으로 보입니다. 평소엔 relative로 간주되구요

(스크롤 위치에 따라 position: fixed; 을 붙였다 뗐다 하는)

 

- w3shcools

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

- mozilla

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

vendor prefix

safari 브라우저를 위한 webkit 접두어가 필요합니다. 

.example { 
  position: -webkit-sticky; 
  position: sticky; 
}