플로팅 배너 자동으로 따라다니는 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를 사용할 필요없이 단순하게

position:fixed

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

 

플러그인으로 만들기조차 아까울정도로 짧은 코드인지라..

그래도 언제 시간이날때 이 소스를 기반으로 플러그인을 만드는 포스팅을 할 예정입니다.

또한 조금 더 손을 봐서 모바일에서는 보이게 하지 않는다던지,

아니면

$(window).scrollTop();

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

하는식으로 여러가지 응용이 가능할것 같습니다.

 

소스 및 데모는 아래 링크에서 확인할수 있습니다.

https://jsfiddle.net/JangSeongeun/dqddL01z/