사이드바를 고정시키는 jQuery 플러그인 sticky-kit.js 를 적용시켜보았습니다.

 

예전에 하던일도 그렇고, 평소 블로그나 홈페이지 UI 부분에 상당히 관심이 있고,

유행이 되는부분은 유심히 지켜봅니다만, 요즘 흔히 볼수 있는게 리스트형 블로그 구조에서 사이드바를 고정시켜 스크롤되어도 사이드바 부분은 움직이지 않는 형태를 가지고들 있습니다.

(현재 이 포스트 역시  스크롤을 내리면 사이드바가 고정되어 있는것을 확인하실수 있습니다.)

‘이 부분 나도 구현 해봐야겠다’ 하는 생각에 알아보니,

이 기능을 제공하는 jQuery 플러그인이 있어 사용법을 공유를 해볼까 합니다.

 

---

스마트한 고정 요소를 만들어주는 jQuery 플러그인 sticky-kit

 

제작자의 홈페이지(http://leafo.net/sticky-kit/)를 보시면, 간단한 예제와 데모를 제공하고 있습니다.

Sticky Kit Git 저장소 를 봐도 계속 버전 업데이트를 하는거보니 앞으로도 기능등을 보완, 추가 할거 같습니다.

npm, bower 등 패키지 형태로도 제공하는 모양입니다.

기본적인 사용법

 

$('#sidebar').stick_in_parent();

이렇게 jQuery 셀렉터로 원하는 요소를 선택한후 stick_in_parent() 메소드를 호출하면 작동합니다. 하나만이 아닌 복수도 가능하기에 jQuery 셀렉터를 사용하여 다양한 효과를 연출할수 있습니다.

옵션

 

• parent: 부모 엘리먼트
• inner_scrolling: 내부 스크롤의 유무
• sticky_class: 클래스명
• offset_top: 오프셋될때 top 의 위치

 

이벤트

 

• sticky_kit: stick = 고정이 시작되엇을때
• sticky_kit: unstick = 고정이 풀렷을때
• sticky_kit: bottom = 요소가 더이상 빌려나지 않는 부분까지 닿았을때(footer)
• sticky_kit: unbottom = 요소가 더 이상 바닥에 닿지 않을 때

 

사용예

 

스크롤된후 고정요소 위에  여백을 두려 할때

 

$('#sidebar').stick_in_parent({offset_top:50});

이렇게 하면 고정될때 상단에 50픽셀 을 두고 고정되게 된다.

 

사이드바 전체가 아닌 그 안의 요소만 고정시키려 할때

 

HTML

<div id="page" class="clearfix">
  <div id="side">
    <div id="menu1">첫번째 메뉴</div>
    <div id="menu2">고정 시킬 메뉴</div>
  </div>
  <div id="main">
    컨텐츠 의 내용들
  </div>
</div>

 

JS

$('#menu2').stick_in_parent({parent:'#page'});

부모가 되는 요소를 parent 옵션으로 넘겨주면 된다.

 

스크롤의 높이를 다시 계산 시킨다.

 

$('#submenu a').click( function(){
  $(document.body).trigger('sticky_kit:recalc');
});

스크롤높이를 재조절해야 할때,

무언가 이벤트가 있을때 고정요소부분에 추가되는 요소가 있거나 있던 요소의 길이가 달라질때등 스크롤의 높이를 다시 계산시킵니다.

 

---

참고

 

http://qiita.com/sygnas/items/57e692d273089e99de58

http://www.moongift.jp/2013/10/sticky-kit-%E7%B0%A1%E5%8D%98%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E8%BF%BD%E5%BE%93%E5%9E%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92-2/