센터2개



스크롤 따라 다니는 레이어(퀵메뉴) 슬라이드 자바스크립트

블로그에 자바스크립트로 

스크롤로 따라다니는 퀵메뉴를 달아보려다가

잘 알지는 못하지만..

jquery로 된 소스가 있어서 

참고해서 수정을 해 본 결과 잘 적용되었다.

코드는 아래와 같다.

현재 jquery는 1.8.0 까지 버전이 나와있지만 테스트는 1.4.2로 해서 그냥 사용.

해당 js는 별도로 받아서 사용해야 한다. 

받으러 가기 귀찮은 사람은 

[코드]
<!--jQuery 로드-->
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

<!--퀵메뉴 레이어-->
<div id='quick' style='position:absolute;z-index:2;top:0;left:0;width:100px; border:1px solid black;'>
퀵메뉴<br>
레이어<br>
</div>

<!--스크립트-->
<script type="text/javascript">
var quick_menu = $('#quick');
var quick_top = 80;
/- quick menu initialization *-
quick_menu.css('top', $(window).height() );
$(window).resize(function() {
  quick_menu.stop();
 quick_menu.animate( { "left": $(document).scrollLeft() + $('#content').offset().left - $('#quick').width()+"px" }, 500 ); 
});
$(document).ready(function(){
  quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 500 ); 
  quick_menu.animate( { "left": $(document).scrollLeft() + $('#content').offset().left - $('#quick').width()+"px" }, 500 ); 
  $(window).scroll(function(){
    quick_menu.stop();
    quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 500 );
  });
});
</script>

굳이 설명이 필요없다면 

아래 샘플페이지로 바로 이동하시면 되고

파일 다운 :  slide_sample.zip



빈약하지만 설명을 하자면..

1. jquery js를 로드 시켜준다.

2. 스크롤 이동에 따라 따라다니게 할 레이어(퀵메뉴)를 만든다.

3. 퀵메뉴를 움직여줄 코드 작성. 
각 함수 뒤에 숫자는 퀵메뉴가 움직이는 속도이다. 
원하는 만큼 조절하면 된다.(1000=1초, 500=0.5초)

처음에 받았던 소스에 가로 부분 처리가 되어 있지 않아
$(window).resize(function() 함수를 추가해서 
가로 크기가 변경해도 따라다니게 해두었다.

샘플은 왼쪽에 레이어가 붙어있음. 
 오른쪽에 붙이려면 코드를 조금 수정해 주면됨.
 ex) $('#content').offset().left - $('#quick').width() --> $('#content').offset().left + $('#content').width()

테스트 스샷

덧글

  • 윤다발 2012/11/29 10:18 # 삭제 답글

    좋은 정보 감사합니다~!
  • 666 2014/01/26 09:31 # 삭제 답글

    질문입니다 예를들어 님의 사이트에 오른쪽에 사이드바가 있잖아요.(몰입,이슈검색어 등등)
    그것을 마우스 스크롤을 할때 통채로 같이 따라다니게할수는없는지요.
    만약 지금 설명해주신 부분이 해당 방법이라면 이미만들어져있는 사이드바는 어찌 움직이는지 아시는지요.
댓글 입력 영역


우측광고

리얼클릭_사이드