플로팅 배너 넣기 / 따라다니는 배너 / 제이쿼리 플러그인

padudu.com 좌측 우측 상단 보면 따라다니는 배너들이 보일겁니다.

이걸 프로팅 배너라고하는데요.

넣는 방법을 알려드리겠습니다.

우선 소스!

<!--jquery 프레임워크 이미 있다면 안 넣으셔도 됩니다-->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!--jquery-->
<script>
$(function() {
    /*-----------------------------------------------------------------------------+
    | 플러그인 방식
    +------------------------------------------------------------------------------+
    | auther : insung
    | site : padudu.com
    +-----------------------------------------------------------------------------*/
    $.fn.verticalFixed = function() {
        var container = this;
        
        if(container.length == 0)
        {
            return false;
        }
 
        var targetArr = [];
 
        for(var loop = 0; container.length > loop; loop++)
        {
            targetArr[loop] = {
                'obj':$(container[loop])
                ,'position':$(container[loop]).position()
                ,'offset':$(container[loop]).offset()
            };
            // console.log(targetArr[loop]);
        }
 
 
        $(window).scroll( function() {
            
            for(var loop = 0; targetArr.length > loop; loop++)
            {
                var target = targetArr[loop];
 
                if(target.obj.css('position') == 'static' && target.offset.top <= $(document).scrollTop())
                {
                    target.offset = target.obj.offset();
 
                    target.obj.css({
                        'position':'fixed'
                        ,'top':5
                    });
                }
                else if(target.obj.css('position') == 'fixed' && target.offset.top > $(document).scrollTop())
                {
                    target.obj.css({
                        'position':'static'
                    });
 
                    target.offset = target.obj.offset();
                }
            }
 
        });
    };
 
    $('*[verticalFixedYN]').verticalFixed();
});
</script>    

위 스크립트를 html파일의 head 태그 안쪽에 넣습니다.

그리고는 따라다니게 만들 태그 에다가 verticalFixedYN="Y" 라고 넣으면 끝.

예)

<div verticalFixedYN="Y">배너 이미지</div>