화면 이동시에 레이어가 따라다니게 하기

by 조쉬 posted Sep 21, 2016
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

아래 소스는 스크롤 이벤트가 발생할 때, box 레이어를 화면상 최 상단에 1초후에 이동시킨다. 애니메이션 효과 없이 바로 이동 시키기를 원하면 1000 대신 0을 넣는다.


<script>

$(window).scroll(function(){

//스크롤 된 화면의 상단 좌표를 얻는다.

var pos = $(window).scrollTop();

//box 레이어가 1초후에 화면의 꼭대기로 이동한다.

$('#box').stop().animate({top:pos+'px'}, 1000);    

}

</script>


<div id="box">

//내용 표시

</div>



box 레이어의 위치를 화면 상단에서 일정한 위치 아래 두고 싶으면 계산된 pos 값이 원하는 높이값을 더해준다.