[jquery] 플로팅 배너 자동으로 따라다니는 jQuery 소스

플로팅 배너가 자동으로 사용자의 스크롤을 따라다니는 jquery 소스.

플로팅 배너의 css 를 absolute로 잡고, jquery 의 animate() 를 이용하여 사용자의 스크롤 이벤트 후 배너를 애니메이션과 함께 위치를 움직여준다.

easing 옵션을 이용하여 애니메이션 효과도 줄 수 있다.

 

CSS

#floatMenu {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50px;
    top: 250px;
    background-color: #606060;
    color: #fff;
}

jQuery

<script>
$(document).ready(function() {
 
    // 기존 css에서 플로팅 배너 위치(top)값을 가져와 저장한다.
    var floatPosition = parseInt($("#floatMenu").css('top'));
    // 250px 이런식으로 가져오므로 여기서 숫자만 가져온다. parseInt( 값 );
 
    $(window).scroll(function() {
        // 현재 스크롤 위치를 가져온다.
        var scrollTop = $(window).scrollTop();
        var newPosition = scrollTop + floatPosition + "px";
 
        /* 애니메이션 없이 바로 따라감
         $("#floatMenu").css('top', newPosition);
         */
 
        $("#floatMenu").stop().animate({
            "top" : newPosition
        }, 500);
 
    }).scroll();
 
});
</script>

여기서 애니메이션을 easing option 을 추가한다면

$("#floatMenu").stop().animate({
    "top" : newPosition
}, {
    'duration' : 500,
    'easing' : 'easeInOutCubic',
    'complete' : function() {
        console.log('이동 완료하였습니다.');
    }
});

animate 옵션중의 complete 를 이용하여 에니메이션 완료후 따라온 배너에 효과를 한번더 준다던가 처리를 해줄 수 있습니다.

 

애니메이션 효과를 주지않고 그냥 고정되게 보이려면 jquery를 사용할 필요없이 CSS부분에

position:fixed

를 이용하면 간단하게 사용할 수 있다.

 

아니면 소스상에 

$(window).scrollTop();

이 값을 이용하여, 특정 스크롤 밑에 왓을때만 배너가 보이게 한다던지 할 수 있다.