메뉴 건너뛰기

조회 수 725 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

스크롤을 움직일때마다 옆에서 알짱거리는 메뉴라던가, 알림이라던가, 광고라던가.. 만들어 볼려고 하는데, 찾아보니 소스도 많고, 왠지 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값을 변경시켜주는 방식이다


List of Articles
번호 제목 날짜 조회 수
59 jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty) file 2019.01.16 1084
58 jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값) 2019.01.16 1079
57 jQuery 기초 (JQuery - text(), val(), html(), attr(), prop()) 2019.01.16 1055
56 jQuery 로 원하는 갯수만큼 checkbox 선택하기 2019.01.10 1022
55 .removeAttr() : 특정 속성을 제거 2019.01.16 1021
54 이미지 확대/축소 2020.11.25 972
53 .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정 2019.01.16 962
52 jQuery 로 탭메뉴 2019.01.10 938
51 텍스트 필드에 기본글이 마우스 클릭하면 지워지게 하기 폼필드 소스 내에 아래 태그를 삽입한다. 2019.06.04 867
50 jQuery 일반적 팁 2019.06.04 853
49 정규식, 한글 못쓰게 하기, replace all 2021.03.26 842
48 click event scroll 2021.03.31 827
47 //ex)텍스트 박스 포커스 활성, 비활성 이벤트 2019.06.04 812
46 DateTimepicker ( Timepicker + Datepicker ) file 2021.03.26 788
45 JS 날짜 자료 비교 2019.06.04 787
44 새창(자식창) 제어하기, 새창 POST방식으로 값 넘기기 2021.03.26 785
43 체크박스 전체선택/해지 2019.06.04 780
42 JS 타이머 샘플 2019.06.04 745
» 간단한 스크롤 따라 움직이는 메뉴 만들기 2021.03.26 725
40 사업자 번호를 입력하면 자동으로 하이픈을 붙여줍니다. 2020.08.24 703
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved