스크롤을 움직일때마다 옆에서 알짱거리는 메뉴라던가, 알림이라던가, 광고라던가.. 만들어 볼려고 하는데, 찾아보니 소스도 많고, 왠지 jquery 로 안되어 있는것들도 많고, 길게~ 여러가지 옵션이 있는것도 많고 하더라..
하지만.. 필자가 필요한 것은 그냥 순수하게 옆에서 따라가는 메뉴 하나면 되기에, 어디선가 구했던 소스를 기반으로 간단하게 만들어 보았다.
$(window).scroll(function( ){ //스크롤이 움직일때마다 이벤트 발생
var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
$( id ).stop().animate({top:position+"px"}, 1); //해당 오브젝트 위치값 재설정
});
일단 위 소스가 스크롤을 따라다니게 해주는 함수이다. jquery 를 이용했으며 순수하게 스크롤시에 같이 움직이게 해주는 기능만 있는 소스이다.
id 부분에는 해당 id 를 넣어주면 된다.
아래는 이를 사용한 예제이다.
<html>
<head>
<title> test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<body>
<script type="text/javascript">
function scroll_follow( id )
{
$(window).scroll(function( ) //스크롤이 움직일때마다 이벤트 발생
{
var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
$( id ).stop().animate({top:position+"px"}, 1); //해당 오브젝트 위치값 재설정
});
}
scroll_follow( "#scroll" );
//스크롤이 생기도록 <br> 을 여러게 넣은 부분..
$(document).ready(function(){ for( var i=0; i<200; i++ ) {$('#brr').html($('#brr').html() +"<br>" + i);} });
</script>
<div id="scroll" style="position:absolute;right:0;top:0;">
<table>
<tr><td>■■■■■■■■■■■</td> </tr>
<tr><td>■■■■b1ix■■■■</td> </tr>
<tr><td>■■■■■■■■■■■</td> </tr>
</table>
</div>
<span id="brr"></span>
</body>
</html>
익스플로러7,8과 크롬, 불여우에서만 실험 해보았는데 잘 된다.
//-------------------------추가사항 2012.03.19
오늘 들어와보니 의외로 이 소스를 보신분들이 많은것 같아서, Tip으로 하나만 더 설명해주려고 한다.
위의 소스에서 함수 부분에 animate({top:position+"px"}, 1) 이라는 부분이 있을 것이다.
jquery의 animate() 를 이용한것인데, 해당 파라미터에 보면 1로 되어 있는 값이 있을것이다. 이것은 해당 animate()함수가 일어나는 딜레이 값이다.
해당 값은 마이크로 초로, 필자는 1(0.001초)로 해놓았지만, 1000으로 해놓을경우 해당 연산이 1초 후에 일어나서, 스크롤을 내린후 1초쯤뒤에 따라오는 식으로 만들 수 있다.
뭐.. 응용은 스스로 해보길 바란다.
//------------------------추가사항 2012.03.27
animate() 효과로 딜레이를 줄 필요가 없다면, 아래처럼 더 간단하게 구현할수 있다.
$(window).scroll(function(){
var position = $(document).scrollTop();
$("#scroll").css('top', position );
});
현재 스크롤값을 가져와, 단순히 css에 top값을 변경시켜주는 방식이다