[티스토리] 사이드바 스크롤 따라다니는 메뉴 만들기

 

 

본문이 아주 긴 글일 경우 사이드바 영역이 휑~ 한데

 

그럴때 따라다니는 메뉴가 있으면 좋겠어서 몇번 시도하다가 포기했었는데

 

http://cocosoft.kr/361 글을 보게 되었답니다.

 

정리 겸 설명을 해보자면

 

</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() - 450; //이부분을 조정해서 화면에 보이도록 맞추세요
        if (yPosition < 0)
    {
            yPosition = 0;
    }
        $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
    });
});
</script>
<script>
$(document).ready(function() {
    $(window).scroll(function() {
        $(this).scrollTop() > 1000 ? $(".float_sidebar").fadeIn() : $(".float_sidebar").fadeOut()
    })
});
</script>
<!-- 따라다니는 사이드바 끝 -->

</body>

 

 

그리고 원하는 사이드바 메뉴에 float_sidebar 를 넣어주기만 하면 되는데요.

 

예를 들자면

 

<!-- 카운터 -->
<div class="module module-visitor hidden-xs hidden-sm"> 였던것을

 

<!-- 카운터 -->
 <div class="float_sidebar module module-visitor hidden-xs hidden-sm">

 

이런식으로 넣어주면 된답니다.

 

 

샐리는 처음엔

 

최신글 최신댓글 모듈을 따라다니게 만들고 싶었는데

 

최신글등의 사이드바 메뉴는 티스토리에서 중복으로 나오지 않게 막아놓아서 불가능 ㅠ.ㅠ

 

 

그래서 일단은 FEEDS만 따라다니게 만들어 놓았네요.

 

나중에 더 좋은 아이템이 생기면 제대로 사용하지 않을까 싶습니다. ㅎㅎ

 

참 따라다녀야하는 사이드바 메뉴가 원하는 위치에서 보이지 않는다면

 

이부분을 조정해서 화면에 보이도록 맞추세요  <<-- 부분의 앞에 있는 숫자를 조절하면 된답니다.