Jquery 움직이는 레이어(Quick Menu) 만들기

Jquery 움직이는 레이어(Quick Menu) 만들기

 

 

 <div class="quick">
  <p>퀵메뉴</p>
  <p>메뉴1</p>
  <p>메뉴2</p>
  <p>메뉴3</p>
  <p>메뉴4</p>
  <p><a href="#top">맨위로</a></p>
 </div>

기본적으로 위 레이어가 있다 치고..

 

<script type="text/javascript">
$(document).ready(function() {
 /* quick menu */
 $(".quick").animate( { "top": $(document).scrollTop() + 20 +"px" }, 500 ); // 빼도 된다.
 $(window).scroll(function(){
  $(".quick").stop();
  $(".quick").animate( { "top": $(document).scrollTop() + 20 + "px" }, 1000 );
 });
});
</script>

 

 

스크립트  설명들어간다.

 $(".quick").animate( { "top": $(document).scrollTop() + 20 +"px" }, 500 );

 

페이지 첫 로딩시 quick 레이어의 top 위치를 맞춰줌  

하드 코딩으로 첫 위치 잡아놨으면 필요없다. 빼도 상관없음

20 은 꼴리는데로 페이지에 맞게 더해주던 빼주던 설정하고

500은 animte 속도 - 이것도 알아서 설정

 

$(window).scroll()

요거슨 브라우져에서 마우스스크롤 이벤트가 일어났을때 실행하는 함수

 

$(".quick").stop();

저 위에 스크립트중에서 이놈 빼버리면 난감해질꺼다.

왜? 직접해봐 그럼 머리에 박힐테니깐.

함수 실행 중지부분이라고만 써놓는다.

 

 $(".quick").animate( { "top": $(document).scrollTop() + 20 + "px" }, 1000 );
마지막 요거슨

스크롤 이벤트가 일어났을때 스크롤의 위치를 알아내서 이동시키기.

 

 

 

ps. jquery.js 안넣고 안된다 머라 하지 마라. 그정도는 기본아니냐?