본문으로 바로가기

안녕하세요. 오늘은 jQuery 스크립트를 사용해서

따라다니는 사이드바를 만들어 보겠습니다.


예전에 화면에 아예 고정되고 따라다니는 플로팅 메뉴를 만든적이 있긴한데

http://cocosoft.kr/149 - 플로팅메뉴(추천위젯,광고)

오늘은 사이드바의 메뉴 하나 또는 몇개만! 움직이는 따라다니면서 움직이는 형태를 알려드리겠습니다.


당연히 사용 전제 조건으로 jQuery 사용해야겠죠?

요즘 웬만한 스킨이나 티스토리 공식 반응형 웹 스킨등에서도 jQuery를 사용하고 있긴합니다.


완성된 예제 입니다.


스킨의 상관없이 기존 사이드바 div 태그에 값만 설정 추가 해주면

어느 사이드바에서도 사용이 가능합니다.

intro - 사이드바에 대한 고찰

요즘 티스토리에서도 반응형 웹스킨을 공식적으로 지원하고 있고


해외 포럼이나 해외 블로그, 반응형 사이트들을 살펴보면

모바일 디자인과 친화성을 위해서인지 1단 또는 2단형 반응형으로 개발 되는 경우가 많습니다.

구식 브라우저의 호환성도 높이고 깔끔한 디자인으로 포스트 본문에 집중도 잘 되는 것 같습니다.

아예 사이드바 카테고리를 숨겨놓거나 좌측이나 우측 사이드에 고정하는 방식을 많이 사용합니다.



해외 타임지 사이트도 사이드바만 따로 고정되어있는 형태고

티스토리 공식 반은형 스킨도 현재 2가지 형태를 제공하고 있습니다.


저도 이런 깔끔한 디자인이 마음에 들어서

아예 공식 스킨을 사용하거나 2단형식으로 바꿀까?도 고민중입니다.

하지만 이 형식의 단점도 존재합니다.

바로 고정된 사이드바에 광고를 게재시에 애드센스 광고 정책 위반이라는 점입니다.

position: fixed;형식으로 위치하게 되는데 이러한 사이드바 안에

광고를 집어넣게 되면 정책 위반으로 애드센스 수익과 계정이 정지 될 수 있습니다.


지금 티스토리 반응형 웹 공모전 이후 반응형 스킨들이 많이 퍼지면서

고정된 사이드바에 광고를 위치시키는 분들이 많은데

사이드바의 길이가 길어서 스크롤이 되어서 고정된 형태가 아닌 것 처럼 보여도

전부 정책 위반입니다. ㅠ_ㅠ 


저도 만약 사이드바의 애드센스 광고를 달지 않을 경우에는 해당 고정된 형태인 사이드바를 사용을 할 것 같습니다.

애드센스를 사용하시는 분들이라면 항상 정책 위반 ㅠ_ㅠ여부를 염두에 두고 해야합니다.

저도 스킨을 최근에 변경하면서 광고 정책을 위반하지 않으려고 스킨 여백 수정을 하고 있습니다.


만약 CCZ-CROSS 스킨 또는 티스토리 스킨을 사용하시는 분들중


우측이나 좌측에 고정된 형태의 사이드바를 사용하고 싶으신 분들은

SONYLOVE님의 게시글을 참고하세요!

http://sonylove.tistory.com/1132티스토리 스킨 사이드바 고정하는 방법


본격적으로 시작!!!!!!!

이제 본격적으로 사이드바의 메뉴중

하나 또는 여러개만 스크롤을 내릴시 본문콘텐츠에 맞춰서

따라 내려가는 방법에 대해서 알아보겠습니다.

부드럽게 따라다니는 사이드바

우선 자바스크립트 소스를 붙혀넣기 해야됩니다.

해당소스는 http://blog.bits.kr/90 및 http://madebykaus.com/?p=300 를 참고해서

티스토리 블로그에 맞게 수정을 하였으며, 더자세한 속성값은 해당 포스트를 참고바랍니다.


html//css 수정에서 html 제일 하단 부분 </body> 에 붙혀넣기를 하면됩니다.


<script>
$(function(){
    var $win = $(window);
    var top = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
 
    /*사용자 설정 값 시작*/
    var speed          = 500;     // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec)
    var easing         = 'linear'; // 따라다니는 방법 기본 두가지 linear, swing
    var $layer         = $('.float_sidebar'); // 레이어 셀렉팅
    var layerTopOffset = 0;   // 레이어 높이 상한선, 단위:px
    $layer.css('position', 'relative').css('z-index', '1');
    /*사용자 설정 값 끝*/
 
    // 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해
    if (top > 0 )
        $win.scrollTop(layerTopOffset+top);
    else
        $win.scrollTop(0);
 
    //스크롤이벤트가 발생하면
    $(window).scroll(function(){
        yPosition = $win.scrollTop() - 1100; //이부분을 조정해서 화면에 보이도록 맞추세요
        if (yPosition < 0)
        {
            yPosition = 0;
        }
        $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
    });
});
</script>
</body>
</html>

그리고 나서 따라다니게 하고 싶은 사이드바 모듈에

클래스 값 .float_sidebar을 넣어주면 됩니다.


<div class="float_sidebar"></div>

요런식으로 추가해도 됩니다!!


스크립트 부분에서 yPosition 수치만 잘 조절해주시면 쉽게 따라오는 메뉴를 만들 수 있습니다.

따라다니는 사이드바 메뉴도 마찬가지로 애드센스 영역을 따라다니게 해서는 안됩니다. 애드센스 광고 정책 위반입니다.


+추가 응용편)일정이상 내려가면 나타나게하기

위 방법은 사이드바 중간에 위치한 모듈도 클래스 값을 줘서 내릴 경우

사이드바의 위치 깨짐이 없이 내려가게 가능하나

보기에는 좋지 않겠죠?!ㅎㅎ

다른 사이드바 모듈을 다거치면서 내려오니깐요?


그래서 되도록이면 따라다니는 사이드바를 가장 아래 쪽으로 위치해주거나


아니면 일정 스크롤 이상 내려갔을 경우 나타나게 만들어 주면 되겠죠??

동일한 사이드바를 하나더 만들어서 가장 아래에 배치를 해주고

속성값은 display: none; 값을 줘서 보이지 않게 한 다음


아래 스크립트를 추가해서 일정 이상 내려갔을 경우 나타나게 해주면 되겠죠?



<script>
$(document).ready(function() {
    $(window).scroll(function() {
        $(this).scrollTop() > 1000 ? $(".float_sidebar").fadeIn() : $(".float_sidebar").fadeOut()
    })
});
</script>


따라다니는 사이드바 메뉴 배너 플로팅 박스들 만드는 방법은 다양하니!!

잘 참고하시면 될 것같아요.

이 방법을 응용 하시면 다양한 연출이 가능 할 것 같습니다.


굳이 부드럽게 이동하는 것을 원하지 않는 분들은 addClassremoveClass잘 사용하셔도

position:와 여백을 수정하게 해서!

고정되어 이동하는 카테고리를 잘 만들 수 있을 거라 생각합니다!!


<script>
	$(document).ready(function () {  
        var top = $('#float_sidebar').offset().top - parseFloat($('#float_sidebar').css('marginTop').replace(/auto/, 0));
        $(window).scroll(function (event) {
        var y = $(this).scrollTop();
  
       if (y >= top) {
          $('#float_sidebar').addClass('fixed');
       } else {
          $('#float_sidebar').removeClass('fixed');
      }
  });
});
</script>

이런식으로 말이죠.

결론

저도 지금 스킨을 바꾸면서 계속 수정을 하고 변경을 하고 있는 중입니다.

아예 사이드바를 고정할지

아니면 스크롤이 내리더라도 따라다니는 메뉴를 사용해서

 블로그 콘텐츠의 접근성을 높히는 방법을 사용할지


따로 addthis와 같은 추천글 플러그인을 사용해서 사용할지

(addthis는 유로 구매가 아니면 ㅠ 특정 추천글을 선택할 수 없는 아쉬움이 있습니다.)


계속 테스트를 해보고 결정을 해야 할 것 같습니다.

보조 블로그는 최신글 목록만 따라다는 사이드바를 적용 했는데

애드센스의 페이지 RPM이 소폭 증가 한 것을 알 수 있었습니다.


이것 때문이지는 모르겠지만 사이드바의 영역에 어느정도 추천 콘텐츠를 제공하는 것은

 방문객의 페이지 재방문을 조금이나마 높혀줄 수 있다고 생각합니다.!


그럼 다들 블로그에 사이드바 꾸미기를 잘하길 바라겠습니다.

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.02.22 00:27 신고

    굉장히 어려울줄 알았는데 설명을 쉽게 해주셔서 따라해볼수 있을거 같은데요.
    유용한 정보 감사합니다. ㅎㅎ

    • BlogIcon COCOSOFT COCO Media 2016.02.22 00:38 신고

      넵! ㅎㅎ 감사합니다. ㅎㅎ 저도 직접 ㅠ 스크립트나 직접 만들수있으면 더 많은 정보를 알수있을텐데 저도 공개된 소스를 수정하면서 ㅠ 작성하고 있어서.. 시간이 되면 부트스트랩이나 제이쿼리등등을 배워서 꾸미기하는데 활용하고싶네요!ㅎㅎ 요즘은 스킨 꾸미는 재미로 취미생활 다하는 것 같아요 ㅎㅎ

    • BlogIcon SONYLOVE 2016.02.22 00:41 신고

      저도 비슷하다는... 이제 그만 정착하고 싶어요. ㅠ.ㅠ

  2. BlogIcon 세모뷰 2016.02.22 12:56 신고

    add this는 2일이 지나도 나오질 않네요. ㅋ 사이드바에 추가를 해야되나봐요..

    • BlogIcon COCOSOFT COCO Media 2016.02.22 15:29 신고

      addthis 설치해봤는데 ㅠ 나오긴하던데.. 추천글이 고정되어버리더라구요.. 그거 변경하려면 pro버전 돈내고 해야하는데

      다른 추천 위젯이 있는지 확인해보던지 아니면 캍테고리에 추천게시글을 하나 만들어서 따라다니게 하는형식으로 해야할것같아요

  3. 2016.02.28 01:50

    비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.02.28 12:38 신고

      todiva 님의 toPiece_v3.1.1 스킨을 사용하시고 계시네요.

      테스트를 해보니 정상작동을 하는데!! 클래스를 주는방법이 잘못되었습니다!! 수정해야할 부분을 알려드릴테니 잘확인하시고 따라오세요.

      <script>....</script>스크립트는 위와 똑같이 </body> 바로 위에 붙혀넣으시면 됩니다.
      그리고 아마 yPosition = $win.scrollTop() -1100; 이값을 500으로 고쳐줘야지 잘보일거에요.


      클래스를 부여하는게 중요합니다.
      float_sider 만 기존에 있는 카테고리의 div에 추가시켜주면 됩니다. 아래처럼요. 해당 포스팅은 ccz-cross 스킨을 위로 작성된거니 아래처럼만 수정해주시면 됩니다. float_sider 이것만 추가해주세요!

      <s_sidebar_element>
      <!-- CATEGORY -->
      <div class="sidebox category float_sidebar">
      <h3>category</h3>
      <div class="categorylist"><!-- 카테고리 숨김/펼침 기능 사용은 왼쪽 class에 'open' 추가 -->

      </div>
      </div>
      <!-- //CATEGORY -->
      </s_sidebar_element>

      이런식으로요.

      그리고 마지막 카테고리에는 overflow: hidden;이 설정되어있어서
      일정 사이드바 영역이 아니면 사라지게 됩니다.

      그래서 업로드한 파일[파일업로드]에서 style_topiece_v01.css 파일을 다운로드후 메모장이나 워드패드같은 편집기로 열어준다음

      [class^="section_"],[class*=" section_"]{ float:left; overflow:hidden; margin:0 20px; }

      이부분을 찾아서 overflow:hidden;을 지워줘야합니다.
      [class^="section_"],[class*=" section_"]{ float:left; margin:0 20px; }

      그래야지 정상적으로 아래까지 쭉 따라내려가면 보이게 됩니다.
      한번 더 해보시고 안되는점은 문의주세요!!

  4. 2016.02.28 20:53

    비밀댓글입니다

  5. 2016.02.28 20:54

    비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.02.28 17:36 신고

      <s_sidebar_element>
      <!-- CATEGORY2 -->
      <div id="float_sidebar" class="sidebox category">
      <h3>category</h3>
      <div class="categorylist"><!-- 카테고리 숨김/펼침 기능 사용은 왼쪽 class에 'open' 추가 -->
      [샵샵_category_list_샵샵]
      </div>
      </div>
      <!-- //CATEGORY -->
      </s_sidebar_element>


      html편집에서 이런식으로 카테고리를 하나더 만들어줍니다. 그리고

      [관리]->사이드바설정-> CATEGORY2 위치를 가장 밑에 배치시켜줍니다.
      평소에는 보이지 않는 상태입니다. 샵샵 적힌것은 ##으로 고쳐주세요.

    • BlogIcon COCOSOFT COCO Media 2016.02.28 17:36 신고

      </body>
      윗부분에 붙혀넣기해줍니다.

      <script>
      $(document).ready(function () {
      var top = $('#float_sidebar').offset().top - parseFloat($('#float_sidebar').css('marginTop').replace(/auto/, 0));
      $(window).scroll(function (event) {
      var y = $(this).scrollTop();

      if (y >= top) {
      $('#float_sidebar').addClass('fixed');
      } else {
      $('#float_sidebar').removeClass('fixed');
      }
      });
      });
      </script>

    • BlogIcon COCOSOFT COCO Media 2016.02.28 17:36 신고

      마지막으로 CSS 편집 가장 밑에 붙혀넣기를 해줍니다.
      그러면 일정이상 내려가면 나타나서 고정된 형태로 카테고리가 내려갈것입니다!

      #float_sidebar.fixed{
      display:block!important;
      position: fixed;
      top: 0;
      margin-top: 15px;

      }

    • BlogIcon COCOSOFT COCO Media 2016.02.28 17:37 신고

      스타일을 줘버리니 겹쳐지는 문제가 발생해서 그냥 가장 밑에 배치하고 따라내려가게 하는 방식을 해야할 것같네요.

      처음부터 천천히 따라해보세요~!

  6. 2016.02.28 20:59

    비밀댓글입니다

    • BlogIcon COCOSOFT COCO Media 2016.02.29 02:42 신고

      해당부분을 확인해보니 ㅠ 티스토리 자체에서 몇몇 스킨치환자는 중복으로 적용이 안되게 막아논것같네요.

      그래서 최신글부분은 중복으로 모듈생성이 안되는 것 같습니다.
      스크립트파일로 외부rss에서 값을 갖고오는 방법이 있는 것 같긴한데
      적용시키는데는 오래걸려서 장담은 못드리겠네요 ㅠ

      카테고리를 적용하시는 방법쪽으로 하셔야 될 것같아요 ㅠ_ㅠ

  7. 2016.02.29 03:01

    비밀댓글입니다

  8. 금희 2016.05.13 16:32 신고

    저 궁금한게 있어서 글 남겨봅니다.
    사이드바가 상단에서 200px 떨어진 상태에서 스크롤을 내리다가 사이드바가 상단에서 10px 떨어져있는 시점부터는
    '고정'을 시키고 싶은데 잘 안되네요.ㅠ
    추가해보신 응용편을 사용해 볼까 하다가도 거의 무지의 상태라 이마저도 어려워 혹시나 도움주실 수 있지 않을까싶어 글을 남겨봅니다 !

  9. BlogIcon @nana 2016.09.18 11:12 신고

    플로팅으로 따라 다니는 메뉴를 넣고 싶긴한뎅 , 애드센스 정책위반이라뉘 ㅠ 다른 외국 사이트들은 이렇게 많이 하던데 어떻게 안짤리는지 궁금하네요 ㅎ

  10. BlogIcon BlackPanda 2017.02.26 01:56 신고

    글을 읽어보았습니다.....고정형 사이드바와 움직이는 사이드바에 광고를 올리는 게 정책 위반이라는 말씀이신가요?? 저는 이 글에 있는 동영상 예시처럼 움직이는 사이드바에 광고를 달아서 글을 읽는 동안 지속적으로 노출이 되도록 하려고 했는데 정책위반이라는 말씀이신가요??

  11. BlogIcon 갓건2 2017.03.04 18:43 신고

    티스토리 Fast boot에 적용해봣는데 모바일로보면 사이드바가 밑으로 계속내려오던데 수정하는방법 없을까요?

  12. BlogIcon 득템 2017.12.15 18:35 신고

    유용한 정보 감사합니다.
    이거 그대로 따라 했는데 안되는 이유는 무엇인가요?

티스토리 툴바