티스토리 뷰
반응형
웹서핑을 하다 보면 스크롤바를 따라다니는 슬라이드 메뉴를 자주 볼수 있습니다. 오늘은 슬라이드 메뉴를 jQuery로 만드는 방법을 알아보도록 하지요. jQuery가 처음이신 분들은 강좌1 부터 보시는걸 권장합니다.
1. 슬라이드 메뉴의 Key Point
- 어떤 대상을 움직이려면 대상의 position 값은 absolute 또는, relative 값이 되어야 합니다.(css 에서 설정합니다.)
2. 마크업 보기
<body>
<div id="wrap">
(주저리 주저리..컨텐츠 내용)
</div>
<div id="slidemenu">
(슬라이드 메뉴 내용)
</div>
</body>
예제에서는 이런 구조로 마크업 되어 있으며, slidemenu의 css 속성값은 아래와 같습니다.
#slidemenu{background:#12cf3d;position:absolute;width:100px;top:50px;right:10px;}
즉, 현재 슬라이드 메뉴는 브라우저 상에서 상단에서 50px만큼, 우측에서 10px만큼 떨어져 있는 상태입니다.
이제 이 슬라이드 메뉴를 스크롤바에 맞추어 움직이는 jQuery 소스를 보도록 하지요.
<script type="text/javascript" src="jquery.js"></script> // jquery 라이브러리를 가지고 옵니다.(강좌1 참조)
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = parseInt($("#slidemenu").css("top"));
$(window).scroll(function() {
var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
$("#slidemenu").stop().animate({"top":position+currentPosition+"px"},1000);
});
});
</script>
자 우선 코드를 분해하기 전에, 어떻게 해야 슬라이드 메뉴가 스크롤바에 맞추어 움직이는지 로직을 생각해 보도록 하지요. 우선, 슬라이드 메뉴가 움직인다는 것은 css의 top 값이 변경된다는 뜻입니다. 즉, 어떠한 이벤트(event) 가 발생하게 될때마다 슬라이드메뉴의 top 의 값이 변경되도록 해야 합니다.
그럼, 어떠한 이벤트가 발생되어야 할까요? 맞습니다. 브라우저상의 스크롤바의 위치값이 변경될때마다 슬라이드 메뉴의 위치값이 변경되어야 합니다.
즉, 위의 소스코드에서 볼때 $(window).scroll(fn) 이 부분이, "window 창에서 scroll 이벤트가 발생할때마다 콜백함수 fn 을 실행하여라." 라는 뜻이 됩니다.
그럼 스크롤 이벤트가 발생할때마다 실행되는 콜백함수 부분을 보지요.
var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
$("#slidemenu").stop().animate({"top":position+currentPosition+"px"},1000);
var position = $(window).scrollTop(); 부분을 보도록 하겠습니다. 이 부분은 주석으로 달아놨듯이 현재 스크롤바의 위치값을 반환하여 변수 position 에 할당하는 것입니다.(변수의 개념을 잘 모르시면 댓글남겨 주세요)
그리고 다음으로 핵심적인 부분을 보도록 하지요.
$("#slidemenu").stop().animate({"top":position+currentPosition+"px"},1000);
$("#slidemenu") 부분은 강좌1,2 에서 설명했듯이 선택자 영역입니다. ID 속성값이 slidemenu 인 대상이 선택되어진 상태이지요. 슬라이드 메뉴를 감싼 div 가 되겠지요?
그런다음에 stop()과 animate() 라는 메서드가 보입니다. 우선 stop()은 넘어가도록 하지요.
animate(매개변수,진행시간) 메서드에 대해 자세히 다루어 보겠습니다. animate() 메서드는 두개의 인자를 받습니다. 처음 인자는 속성값을 정하는 부분인데요, {"속성":"값"} 형식으로 들어가게 됩니다. 즉, 대상의 속성을 해당하는 값으로 변화시킨다는 것이지요.
위의 예제에서는 top 속성값을 현재 스크롤바의 위치값으로 변경하였습니다. 그래서 스크롤바의 위치값이 변경될때마다 대상의 top 값이 현재 스크롤바의 위치값으로 변경되면서 대상이 움직이게 되는 것이지요.
animate() 두번째 인자에는 애니메이션이 얼마동안의 시간안에 시현이 완료될것인지 정할수 있는 microTime 값이 들어가게 됩니다. 즉 1000이라 함은 1초를 뜻하게 됩니다.
예제를 살펴보면, 1초동안 슬라이드 메뉴가 현재의 스크롤바 위치로 이동하게 되는것이지요. 1초라는 시간이 주여졌기 때문에 슬라이드 메뉴가 바로바로 이동하지 않고 약간은 스크롤바에 뒤쳐져 이동하는것을 알수 있습니다.
여기서 stop() 메서드는 여러분들이 직접 실험해 보세요. 제가 백마디 하는것보다 stop()메서드가 없을때와, 있을때의 차이점을 보시는것이 더욱 이해하기 좋습니다.
처음이라 자세히 설명하려고 하다보니 글이 길어지네요. 자세한 설명은 점차 줄여나가도록 하겠습니다.
질문사항이나 해주었으면 하는 예제가 있으시면 댓글 남겨주세요.
from. http://webnoon.net/entry/jQuery-강좌3-스크롤바-따라다니는-슬라이드-메뉴
반응형
'Web Dev > jQuery' 카테고리의 다른 글
| jQuery 강좌6. Select 필드를 동적으로 변경하기 with PHP (0) | 2013.03.07 |
|---|---|
| jQuery 강좌5. 카테고리 분류하기(필터링) (0) | 2013.03.07 |
| jQuery 강좌4. 이미지 바꾸기 (0) | 2013.03.07 |
| jQuery 강좌2. 펼침목록 만들기 (0) | 2013.03.07 |
| jQuery 강좌1. 어려운개념은 버리고 바로 시작하기 (0) | 2013.03.07 |
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- submit
- jquery
- create
- If
- Filter
- 기초
- Click
- 항공편
- regexp
- 비행기
- javascript
- android
- 인천공항
- 제이쿼리
- ready
- Oracle
- Selector
- MySQL
- event
- html
- jsp
- dom
- asp
- attr
- Drop
- centOS
- Next
- focus
- 실시간
- select
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
글 보관함