티스토리스킨 스크롤시 사이드바 위치고정 방법 4가지

CCZ-CROSS 반응형 스킨의 사이드바를 고정하는 방법을 이리저리 알아보고 찾은 내용들을 공유 차원에서 정리하는 포스팅. 어떠한 형태로 할지에 따라 여러가지 방법이 있는데 jquery 자바스크립트 같은 소스를 사용하는 방법도 있고 아니면 그냥 CSS에서 설정만 해서 박아둘 수도 있다.

 

 

1. 스크롤바 따라서 내려오는 사이드바

 

CCZ-CROSS 스킨 꾸미기에 대한 여러가지 친절한 가이드가 많이 올라와 있는 COCOSOFT님의 블로그 내용이다. 아래 유튜브 동영상 예제를 보자.

 

전형적으로 스크롤되면서 따라 내려오는 소스로, 아주 옛날 다음카페 시절부터 활용되었던 고전 느낌의 방식이다.

 

하지만 실제로 COCOSOFT 블로그에서는 이 스크립트보다는 특정 위치 이상 스크롤되면 마지막 메뉴만 고정이 되는 방식을 사용하고 있으신 것으로 보인다.

 

 

2. 스크롤시 특정 부분에서 고정

 

COCOSOFT님의 소스를 확인해보면서 따라하려고 하다가 안되서, 추가 검색중에 ☑️bong8nim 이라는 블로그에서 소개해준 jQuery 자바스크립트 소스이다. 아마 이 기능을 사용하고자 하는 사람들이 '그래 이거야!' 하고 생각할 바로 그 방법일 것이다. 사이드바에 5가지 메뉴가 있는데 쭉 내리다보면 마지막 1,2개만 상단에 탁 걸리는 느낌으로 고정되는 방법.

 

Sticky-Kit | jQuery plugin for sticky elements

 

/*
 Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
*/
(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,
u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);

 

3. 사이드바 위치 고정

 

스크립트 같은거 넣고 수정하고 머리아픈 나같은 초보자는 사이드바 영역 자체를 화면에 붙박이로 고정시켜버리는 방식이 더 알기가 쉽다. CSS 에서 사이드바의 클래스 부분을 position:fixed로 해서 위치를 지정해주고 오른쪽이나 왼쪽에 박아버리는 방법이다. 

 

단 이 방법은 단점이 있는데, 애초에 화면 좌우 끝에 들어가는 사이드바가 아니었다면 CCZ-CROSS 같은 이런구조의 스킨은 레이아웃을 수정해주어야 한다는 점이다. 그리고 스크롤이 되면서 따라오는 방식이 아니라 화면에 그대로 고정되어 보여지는 것이므로, 최소 FHD해상도 기준으로 세로 1080px 이내의 영역에 사이드바 메뉴를 다 넣어야 한다.

 

4. CSS 수정없이 더 간단히 고정

 

그래서 마지막으로는 이 블로그에 적용한 가장 간단한 방법이다. 어차피 사이드바를 스크롤할게 아니라 꼭 필요한 메뉴만 1080px 이내에 다 넣을 생각이라면 이 방법이 최고다. 레이아웃 수정도, CSS를 건드릴 필요도 없다.

 

이 블로그에는 위 소스와 같이 네이버 이웃위젯과 카테고리만 사이드바에 넣고 위치를 고정시켰다. CCZ-CROSS의 사이드바 레이아웃을 수정하지 않고, HTML 부분의 div style:"position:fixed;top:10px;" 만 추가하면 해당 div 영역 내에서 고정이 된다. 

 

CSS에서 position:fixed 를 추가해서 건드릴 경우 전체 화면 내에서 위치가 지정되기 때문에 창을 줄이면 사이드바가 본문과 겹친다던지 해서 자잘한 수정이 계속 필요한데 그럴 필요가 없는게 가장 편한 점이다.