CSS! position: stickey; 에 대하여

친효스킨 2.0 버전에서는 사이드바에 스티키(STICKY) 모드를 적용시켰습니다. 스티키는 매소드로 CSS position에서 사용할 수 있는 옵션 중 하나 입니다. 하지만 아직까지 다양한 브라우저에서 지원하는 매소드는 아닙니다. 특히 익스플로러는 헬이라고 할 수 있습니다. 이래서 익스플로러는 사랑받을 수 없는 것 입니다! 그러니까 마소가 자꾸 엣지 브라우저를 개발하고 내세우는 거겠죠?

 

포지션에 sticky가 적용되면 어떻게 움직일까요? 사이드바에서 자주 쓰일 수 있는 이 기능은 평상시에는 그냥 position: static 과 같은 기능을 합니다. 즉 별다른 변화가 없습니다. 하지만 특정 한계점에 다다르면 Fixed (고정) 됩니다. 스티키 사례는 아니지만, 네이버 PC 해상도에서의 메인화면을 살펴보시면 오른쪽의 사이드바가 거의 Sticky와 같은 기능 입니다. 물론 네이버 메인화면의 경우는 자바스크립트로 사이드바의 움직임을 설정한 것입니다. 하지만 Sticky로 이와 비슷한 효과를 간단히 만들 수 있게된 샘 입니다.

 

STICKY가 적용된 예시

친효스킨 v1.18 에서의 사이드바 모습이다. 현재 STICKY 모드가 적용되어 있다.

본래대로라면 본문 내용이 사이드바보다 한 없이 긴 경우에는 당연히 사이드바는 똑같이 스크롤해서 따라 올라가다가 본문보다 짧으니 어느 시점에서는 화면에서 보이지 않게 될 겁니다. 하지만 STICKY 설정을 해두면 본문의 길이를 알아서 계산하여 사이드바가 늘 본문의 길이에 맞춰 적당히 그 사이에서 유동성 있게 움직이게 됩니다. 굳이 표현 하자면 유동성 있는 FIX 상태라고 부르고 싶습니다. 아래에 테스트용 코드펜을 올려놓았습니다. 마우스 휠로 한번 올리고 내리고 해보시기 바랍니다.

 

 

See the Pen CSS! {position: sticky;} by rgy0409 (@rgy0409) on CodePen.

 

보시면 NORMAL 상자는 그냥 일반적인 움직임을 보여줍니다. 당연히 포지션에 대한 속성이 없으니 스크롤을 하면 화면 위로 올라갑니다. FIX는 우리가 보는 화면 상에 그대로 고정되어 있으니 당연히 움직이지 않습니다. STICKY의 경우는 NORMAL처럼 위로 올라가다가 STICKY 속성으로 인하여 top: 20px; 지점에서 고정되어 움직이지 않게 됩니다. 이런 차이점이 있다는걸 직접 육안으로 확인할 수 있습니다.

 

CSS 살펴보기

친효스킨의 경우 입니다.

 

#container #sidebar {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
    float: left;
    width: 300px;
}

CSS 사이드바 스타일 영역에 position: sticky; 라고 마크업이 되어 있습니다. 밴더 프리픽스도 같이 적용시켜주면 호환성이 더 좋아지겠죠? 그래서 아래쪽에 -webkit-을 추가하였습니다. 그리고 중요한 포인트가 있는데 반드시 top, bottom, left, right 속성 중 하나를 사용해야 한다는 것 입니다. 왜냐하면 sticky는 fixed 속성을 가지고 있기 때문입니다. 그렇기 때문에 친효스킨 사이드바에 top: 20px; 속성을 추가했습니다. 그렇기에 위의 예시처럼 top 으로부터 20px 떨어진 지점에서 멈추게 되는 것 입니다.

 

sticky 호환 여부

아직까지 많은 브라우저에서 sticky를 지원하는건 아닙니다. 하지만 앞으로 CSS가 점점 버전업을 하고 브라우저 또한 업데이트가 될 수록 호환성이 좋아질 것으로 기대합니다.

 

각종 매소드 호환 여부를 확인할 수 있는 caniuse.com

Can I Use 닷컴에서 확인해보기

Can I use... Support tables for HTML5, CSS3, etc

위의 사이트에서 직접 STICKY를 입력해서 확인 가능 합니다. 확실히 IE(Internet Explorer)만 완전 망했습니다. 마이크로소프트는 정녕 익스플로러를 버리는 카드로 생각하는 걸까요? 그래도 국내에서 아직까지 익스플로러 전용 홈페이지가 많은데 말입니다. 하루빨리 이 업체들은 크로미움 기반의 브라우저 웹페이지를 개발했으면 좋겠습니다. 끝.