• J볃교

JQUERY를 이용하여 스크롤시 따라다니는 효과 나타내기

2018-12-18 379

설명

  • 카카오톡 링크

JQUERY를 이용하여 스크롤시 따라다니는 효과 나타내기 소스 입니다~
현재 ajax으로 인하여 정상적으로 작동하지 않고있습니다 해당 링크로 가보시면 정확하게 나타납니다 :D

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<script type="text/javascript">
	$(window).on('scroll',function(){
		var invest_quick = $('.test_box');
		var wi_st = $(window).scrollTop(); // 현재 스크롤 위치
		var footop = $('#footer').offset().top - $(window).height(); // 현재 푸터의 위치 - 총 높이
		var item_info_top = $(".wow_box").offset().top; // 총 움직여야 할 공간
		if ( wi_st >= footop){
			invest_quick.stop().animate({ top: footop  - $('.test_box').height()}); 
		}else if( wi_st >= item_info_top){
			invest_quick.stop().animate({ top: wi_st - $('.wow_box').offset().top + 125 + 'px'}); // 이동 하는 위치 +  125 는 무엇?(헤더영역 + 38)
		}else{
			invest_quick.stop().animate({ top: 38 + 'px'}); // 처음 위치
		}
	});  
</script>
<style type="text/css">
	.wow_box {display:inline-block; width:100%; position:relative; background:#f2849e}
	.height_box {height:1500px}
	.test_box {position:absolute; right:0; top:0; width:300px; height:300px; background:#112f41}
</style>
<div class="wow_box">
	<div class="height_box">
	</div>
	<div class="test_box">
	</div>
</div>